解决前端跨域演示的简单例子（CORS、jsonp）

服务器使用express版本4.18.2（没什么特别意思，防止版本更新express的api变更导致代码报错）

npm init -y
npm i [email protected] save

CORS

服务器代码

const express = require('express')
const app = express()
const port = 3000

// 这里解决跨域问题，设置回应报文请求头Access-Control-Allow-Origin
app.all('*', function(req, res, next) {
    
    
  res.header("Access-Control-Allow-Origin", "*");
  next();
})

app.get('/', (req, res) => {
    
    
  res.send(`success`)
})

app.listen(port, () => {
    
    
  console.log(`Example app listening on port http://127.0.0.1:3000`)
})

前端页面代码

<script>
	fetch('http://localhost:3000/').then(response => {
     
     
    console.log(response)
  })
</script>

jsonp

服务器代码

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
    
    
  // 返回给前端后直接调用前端定义好的函数了
  res.send(`${
      
      req.query.callback}(88)`)
})

app.listen(port, () => {
    
    
  console.log(`Example app listening on port http://127.0.0.1:3000`)
})

前端代码

<!--必须先定义回调函数，放在请求前面-->
<script>
  function f (res) {
     
     
    console.log(res)
  }
</script>
<!--请求返回后自动调用函数执行-->
<script src="http://127.0.0.1:3000/?callback=f"></script>