协议 - 域名 - 端口号 只要有一个不相同就是跨域,解决方案如下
1. Http Proxy 代理
在 vue-cli3
中取消了配置文件 vue.config.js
,网上的跨域处理多为新建配置文件,对于有代码洁癖的我这样是不允许的,在读了一番文档后,结合网上的实现方案得到如下解决方案
- 在
package.json
中加入vue
字段(下面的代码段) - 如果请求的地址不是
/api
,借助pathRewrite
将/api
替换 - 我用的是
axios
进行网络请求,在封装axios
时设置baseURL: '/api'
"vue":{
"devServer":{
"proxy":{
"/api": {
"target": "http://xxx.xxx.x.x:8002/",
"changeOrigin": true,
"ws": true,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
2. CORS 跨域资源共享(后端设置)
设置响应头(需要处理 options
请求)
'Access-Control-Allow-Origin' : '*', //任何页面都可以访问这个服务
// 'Access-Control-Allow-Origin' : 'http://baidu.com', //只允许百度来访问这个服务
'Access-Control-Allow-Headers' : 'X-Test-Cors', //允许含有这个头信息的request请求服务
'Access-Control-Allow-Methods' : 'POST,PUT,DELETE', // 设置允许跨域的方法
'Access-Control-Allow-Credentials' : true // 设置允许携带凭证
弊端:
- 如果
Access-Control-Allow-Origin
设置单一源不能同时设置多个 - 如果
Access-Control-Allow-Origin
设置为*
不允许携带cookie
3. JSONP
-
前端声明一个 全局 函数
function func(){...}
-
通过不存在 跨域限制的标签(script, img, iframe, link…) 向服务器发送带有 本地函数 的请求
http://xxx.xxx.0.1:8080/list?callback=func
-
服务器接受到请求,将要返回数据拼接到接受到的函数中
返回 'func('+ data +')'
-
前端接受到后台消息,网页会认为是一个函数调用,这样就能拿到后台数据
弊端:
- 只能处理 GET 请求
- 数据容易被拦截