【vue】【express】跨域的原因以及解决方案（vue+express）

跨域

express设置

app.all('', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  next();
});

vue项目设置

vue.config.js配置

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
  ...
}

axios设置

const instance = axios.create({
    baseURL: '/api',
  });

原因

浏览器的同源策略（相同协议，相同域名，相同端口）

解决方案

jsonp

原理：script不受同源策略影响。

实现过程：前端动态添加一个script标签，script标签的src为目标路径，参数为回调函数的名称。后端获取到该请求，将要返回的数据跟回调函数的名称拼接，并返回。返回后，script标签的内容便会变成函数调用的语句。

1.创建回调函数
function func(data){
	console.log(data)
}
2.新增script
<script src="http:xxx.com/get?callback=func"/>
3.后端获取到该请求
app.get('/get',(req,res)=>{
	let funcName = req.body.callback;
	let obj = "测试数据"		//要返回的数据
	res.end(funcName+'('+obj+')')	//也就是res.end("func('测试数据')")
})
4.前端的script会变成以下内容
<script>
func('测试数据')
</script>
5.该script标签便会调用func函数，获取到请求返回的数据

cors

简单的说：即使是跨域，只要相应头带有Access-Control-Allow-Origin就行。