同源策略 & 跨域

【同源策略】：

源 和 请求地址    相同协议、相同IP、相同端口号。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。

【例子】：

假设 源页面是    http://www.a.com/test/index.html 。http://www.a.com/dir/page.html 成功。

https://www.a.com/dir/page.html               跨域-协议不同

http://www.b.com/dir/page.html                 跨域-域名/ip不同

http://www.a.com:8005/dir/page.html        跨域-端口不同

【跨域要怎么解决】

【本地】

vue项目可以用 proxy 配置跨域。在 vue.config.js 文件里面找到 devServer.proxy来配置。

 "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"
          }
      },

【打包后】

打包后的代理由后端来配置。因为 proxy 的配置在本地创建一个虚拟服务端来转发，所以就不会出现跨域问题，但是打包后就失效了不会再创建一个虚拟服务端了。

更多信息需要看 webpack 才搞得懂

【不受同源策略影响的请求方式】

表单提交、重定向、页面链接