一、什么是跨域？
跨域是浏览器不能执行其它网站的一些资源，如js､图片、dom､视频、音频等cookie､ local storage 和index Db无法读取 、Ajax 请求无法发送等，受浏览器同源策略的影响，只要协议、域名、端口号三个中有任意一个不一样就是跨域。
二、解决方案
1､JSONP方案
利用浏览器对<script>标签没有跨域限制，通过src属性发送带有回调函数参数的get请求，在 callback函数中前端拿到函数返回数据。
<script>
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.domain2.com:8080/login？user=admin&callback=handleCallback';
document.head.appendChild(script);
function handleCallback(res) {
alert(JSON.stringify(res));
}
</script>
只能发送get请求
2、跨域资源共享CORS cross-origin resource sharing 允许浏览器相框原服务器发出XMLHttpRequest请求
在vue中通过vue-cli进行配置，在本地开发环境的请情况下，在vue.config.js中的devServer对象中添加headers: { "Access-Control-Allow-Origin": "*"}，这个表示 向所有请求的herder中添加Access-Control-Allow-Origin 为*则表示接受任意域名的请求 这里后端也需要配置，接收到这个配置项后后端处理。
3、nginx反向代理接口跨域
通过监听端口服务，利用proxy_pass进行反向代理
#proxy服务器
server {
listen 81;
server_name exname;#这里随便写
location / {
proxy_pass http://www.xxxx.com:8080; #反向代理
index index.html index.htm;
}
}
4、使用nodejs中间件代理跨域
在vue项目的开发环境中，配置vue.config.js
module.exports = {
entry: {},
module: {},
...
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// 代理选项
// 可以有多个代理选项
proxy: {
// key表示如果一旦请求地址和它吻合 ，就会触发代理，代理的信息 在对象 value
// localhost:8888/api/user => http://ihrm-java.itheima.net/api/user 这是我们需要的地址
// localhost:8888/api/user => http://ihrm-java.itheima.net/user
'/api': {
target: 'http://ihrm-java.itheima.net/', // 要代理的目标地址
// target: 'http://127.0.0.1:3000', // 要代理的目标地址
changeOrigin: true // 是否跨域
// localhost:8888/api/user => 触发代理 =>
// http://www.baidu.com/user 想要这种
// http://www.baidu.com/api/user 下面是目前的
// pathRewrite: {
// '^/api': '' // 相当于将跨域代理之后的地址进行再次替换 就可以将 /api去掉
// }
}
}
// before: require('./mock/mock-server.js')
},
}
