什么是同源策略？
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
所谓同源是指：协议、域名、端口都相同
 
什么是跨域
跨域就是不同源，就是不满足协议、域名、端口都相同的约定
如：看下面的链接是否与 http://www.chinasgp.cn/index.html 同源？
 
http://www.chinasgp.cn/dir/login.html 同源
https://www.chinasgp.cn/index.html 不同源 协议不同(https)
http://www.chinasgp.cn:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
 
跨域请求devServer代理几种配置
1：先在项目的根目录下新建 vue.config.js 文件
2：在module.exports内设置devServer来处理代理
 
假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.chinasgp.cn 相当于把请求换成 http://www.chinasgp.cn/allin/policy/getProductInfo
第一种代理方式
把请求的url写成/allin/policy/getProductInfo 注意
请求的地址必须是/allin/policy/getProductInfo，而不是http://localhost:8081/allin/policy/getProductInfo，（下面的几种方式也是同样的）因为代理会检查请求开头是否为/allin，如果以http开头，则检查不匹配，则不走代理
 devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的域名
            target: 'http://www.chinasgp.cn',
            ws: true, // 是否启用websockets
        //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
            changOrigin: true,//是否需要跨域
        }
    }
}
相当于遇见/allin才做代理，则会把默认域名http://localhost:8081地址改成 target 对应的http://www.chinasgp.cn地址，但是在浏览器的F12下，Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo， 但是真正的请求的地址则是http://www.chinasgp.cn/allin/policy/getProductInfo
注意
如果只是修改域名，则不需要写pathRewrite，但如果要写，则必须写成pathRewrite: {’^/allin’: ‘/allin’}，相当于把/allin标识还替换成/allin
 
第二种代理方式
把请求的url写成/api/allin/policy/getProductInfo
 devServer: {
     proxy: {
         '/api': {
             //要访问的跨域的域名
             target: 'http://www.chinasgp.cn',
             ws: true,
             changOrigin: true,
             pathRewrite: {
                 '^/api': ''
             }
         }
     }
 }
相当于遇见/api才做代理，但真实的请求中没有/api，所以在pathRewrite中把’/api’去掉, 这样既有了标识, 又能在请求接口中把/api去掉
 
第三种代理方式
把请求的url写成/allin/getProductInfo
注意
这里请求时我没有写/polic，目的是在拦截跨域是我再加上
devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的api的域名
            target: 'http://www.chinasgp.cn',
            ws: true,
            changOrigin: true,
            pathRewrite: {
                '^/allin': '/allin/policy'
            }
        }
    }
}
相当于遇见/allin则替换成/allin/policy，注意/policy后边没有/，这样拼接成功才会是http://www.chinasgp.cn/allin/policy/getProductInfo
第四种代理方式
把请求的url写成/allin/getProductInfo
注意
这里请求时我没有写/polic，目的是在拦截跨域是我再加上
devServer: {
     proxy: {
         '/allin': {
             //要访问的跨域的api的域名
             target: 'http://www.chinasgp.cn/allin/policy',
             ws: true,
             changOrigin: true,
             pathRewrite: {
                 '^/allin': '/'  //必须这样写
             }
         }
     }
 }
这里/allin相当于http://www.chinasgp.cn/allin/policy
这里必须要写pathRewrite: { ‘^/allin’: ‘/’}，而且里边必须要写成’^/allin’: ‘/’，这里的斜杠代表的意思就是使用target中的/allin/policy，否则就要使用上面的方式把斜杠写成/allin/policy，并把target中只写域名，如果不写pathRewrite则请求不会成功。
注意
pathRewrite：如果不写则只能修改代理的域名，如果写则可以修改代理的域名和后边的路径
使用场景
我们开发的Vue项目大部分是用在App内的，而当我们写好一个功能后，如果想在真机上看看效果，那必须要提交到测试环境，然后App内配置好测试地址才可以正常访问。那我们能不能直接让App访问我们自己的IP地址呢，这样的话当在真机上出现问题时，可以先修改，避免了把错误的代码提交到测试环境上，而我们如果直接这么写，肯定会报跨域的问题，这里就需要用到代理机制了。我们就按照上面的几种方式设置代理就可以让App访问我们自己的机器上的代码了