产生跨域原因和前端处理跨域

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

产生跨域原因和前端处理跨域