跨域解决方法

jsonp

原理：利用了img，link，script，iframe标签都不存在跨域限制的特点，使用script标签传递函数

大致步骤：前端把一个函数（func）传递到后端，后端做字符串拼接，得到 "func('一段文字')" 的字符串，发送回前端后，前端就会执行 func('一段文字')

缺点：只能处理get请求，因为要通过?callback=xxx的形式；而且有安全隐患，1、任意程序可获取，数据不安全

前端

<script>
function func(txt) {
  alert(txt)
}
</script>
<script src="http://localhost:9527/test?callback=func"></script>

后端

app.get('/test', (req, res) => {
  const callbackName = req.query.callback
  const data = '一段文字'
  res.send(`${callbackName}(${data})`)
})

CORS

要后端设置Access-Control-Allow-Origin，指定哪些域名允许跨域来请求后端数据

webpack的proxy代理

第一步：安装webpack-dev-server工具
npx i webpack-dev-server
第二步：在webpack.config.js里配置devServer

devServer: {
  proxy: {
    // 把所有以 / 开头的请求都会被发送到http://127.0.0.1:3001/下，以前是请求的 http://127.0.0.1:3001/test，就要改成 /test
    // 当设置changeOrigin为true，webpack-dev-server会用node启动一个服务（因为服务器请求服务器不存在跨域限制），来做中层的代理（从3001请求到数据，再返回给我们），来帮我们解决从3000到3001之间的跨域问题
    '/': {
      target: 'http://127.0.0.1:3001',
      changeOrigin: true
    }
  }
}

自己写一个后端，来做和webpack-dev-server同样的事

利用的也是服务器之间的请求不存在跨域