文章目录

跨域原因解决方案jsonpcors

跨域

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就行。