Vue请求跨域

1、什么是跨越？

一个域下的文档或脚本试图去请求另一个域下的资源，游览器同源策略所以就产生跨域！

2、什么是同源策略？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以aaa.cn下的js脚本采用ajax读取bbb.cn里面的文件数据是会被拒绝的。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

3、举例域名为 dhjdd.cn ajax请求下列资源

URL	说明	是否允许通信
http://dhjdd.cn/user/info	域名，端口相同	允许
http://dhjdd.cn:8888/user/info	同一域名，不同端口	不允许
http://aa.dhjdd.cn/user/info	主域相同，子域不同	不允许

开发环境vue中跨越配置vue.config.js

vue中使用proxy进行跨域的原理：(npm run dev)会启动一个node服务站点（loclahost:8080），配置跨越后用node服务去请求真实的接口地址，绕过游览器，然后项目是启动到node服务上的同一站点、端口满足同源就不会跨越了。

devServer: {
     proxy: { 
         '/api': { // 注意：匹配规则要和axios的baseURL一致
             target: 'http://dhjdd.cn',  //要访问的跨域的域名
             ws: true,
             secure:false, // 使用的是http协议则设置为false，https协议则设置为true
             changOrigin: true, // 开启代理
             pathRewrite: {
                 '^/api': ''
             }
         }
     }
 }

生产环境可用nginx

location ^~ /api/ {
    add_header 'Access-Control-Allow-Origin' *;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,DELETE,PUT';
    proxy_pass http://127.0.0.1:8888/; #代理地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}