1、跨域的原因
跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。
所谓同源指的是两个页面具有相同的协议、主机（域名或ip）和端口，三者有任一不相同即会产生跨域
2、跨域举例
| 当前页面URL | 被请求页面URL | 是否跨越 | 原因 |
|---|---|---|---|
| http://localhost:3000 | https://localhost:3000/ | 是 | 协议不同 |
| http://localhost:3000/ | http://127.0.0.1:3000/ | 是 | 域名或ip不同 |
| http://localhost:3000/ | http://localhost:3001/ | 是 | 端口不同 |
| http://localhost:3000/ | http://localhost:3000/ | 否 | 同源 |
| http://127.0.0.1:3000/ | http://127.0.0.1:3000/ | 否 | 同源 |
3、解决方法
-
jsonp跨域：只能实现get一种请求
通过script标签的src属性加载资源，数据放在src属性指向的服务器上，使用json格式。会定义好处理函数。服务端会在数据开头加上这个函数名，等全部加载完毕，便会调用我们事先定义好的函数，这时函数的实参传入的就是后端返回的数据 -
跨域资源共享（CORS）
跨域资源共享（corss-origin resource sharing）：CORS需要浏览器和服务器同时支持
整个CORS通信过程，都是浏览器自动完成，不需要用户参与（若是cookie请求，前后端都需要设置）；浏览器发现是跨域请求，就会自动在请求头中加上Origin字段，代表请求来自哪个域（协议+主机名+端口号）。服务器在收到请求后，根据请求头中Origin字段值来判断是否允许跨域请求通过。
实现方法：
在响应头Access-Control-Allow-Origin字段中设置指定的域名，表示允许这些域名的跨域请求。如果请求头中Origin字段的域名包含在这些域名中，则可以实现跨域请求
Access-Control-Allow-Credentials字段代表服务器允许cookie可以包含在请求中，一起发送给服务器，值为布尔类型。如果要把cookie一起发送到服务器，还需要在请求中打开withCredentials属性。
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
4、vue如何处理跨域问题？
配置代理服务器
在 vue.config.js 文件中进行配置
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
其中proxy属性用于配置代理的规则，/api表示需要代理的接口路径。target属性表示代理的目标服务器地址，changeOrigin属性表示是否改变请求的源地址，pathRewrite属性用于重写请求的路径
原理：
在启动脚手架的时候会启动一个内置web服务器，请求的时候浏览器实际并没有直接和需要请求的服务器通信，而是通过内置的web服务器在中转
注意：
项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置web服务器做代理，所以此方式只适用于开发测试阶段
上线时一般后端解决跨域问题，需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)
参考文献：
https://blog.csdn.net/weixin_43902063/article/details/116124943
https://blog.csdn.net/weixin_43831204/article/details/109633953
https://blog.csdn.net/qq_41020757/article/details/118681376
https://blog.csdn.net/ACCPluzhiqi/article/details/131565109
https://www.jb51.net/javascript/288449bkv.htm
网友评论