零碎点（一）跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。跨域问题只出现在浏览器中

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。跨域问题只出现在浏览器中，是浏览器的安全策略。跨域关注的三个点：

协议
域名
端口

什么是同源策略SOP

同源策略 Same Origin Policy，为了防止浏览器收到XSS、CSRF等攻击，作为一种保证浏览器核心安全功能的约定。同源指的是上面三个点”协议+域名+端口“相同。注意，即便是两个不同域名指向同一个IP也是非同源。

跨域性html标签

具有跨域性的标签可直接访问。

<link>
<script>
<img>
<iframe>

跨域解决方案

Jsonp 前端解决

动态生成script标签加载src，前端定义方法，可以通过后端的返回值调用前端定义的方法，后端的请求地址通过script标签引入。回调函数可以通过参数的方式传递给后端。缺点是不支持post请求。

前端待调用的回调方法

<script>
function test(a){
    console.log(a);
 }
</script>

<script>标签，后端url及回调函数

<script src="url?callback=test"></script>

后端代码

return callback(a);

CORS 跨域资源共享

服务端设置配置corsConfig。允许跨域请求的域名、发送内容的类型、跨域请求的请求方式。

Access-Control-Allow-Origin 用于设置允许跨域请求源地址（预检请求和正式请求在跨域时候都会验证）
Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段（只在预检请求验证）
Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词（只在预检请求验证）
Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true

Proxy代理

通过中间件，浏览器才会引发跨域问题，因此通过proxy代理把浏览器请求转发给代理服务器，服务器没有跨域要求，通过代理服务器转发给服务器避免跨域问题。

vue.config.js中，配置devServer.proxy就是代理服务器，target中设置要调用的接口域名和端口号，changeOrigin设置为true即跨域。

devServer:{
    //代理服务器
    proxy:{
        //以/api开头的请求自动代理到target设置的路径下
        '/api':{
            target:'后端地址:端口号',
            //是否启用websockets
            ws:true,
            //开启代理，会在本地创建一个虚拟服务端，然后发送请求的数据，并同时接收请求
            changeOrigin:true,
            pathRewrite:{
            // /api开头的替换成/
                "^/api": "/"
            }
        }
    }
}

Nginx反向代理

Nginx为反向代理代理服务器。浏览器请求后端时，实际上是请求Nginx服务器，由Nginx服务器代理请求后端服务器，后端返回时，返回给Nginx的代理后端地址，代理服务器再返回给浏览器。这样浏览器请求的前端地址和代理后端地址都在Nginx代理服务器中，保证了同源。

server {
        listen       80;
        server_name  localhost;
        ## 用户访问 localhost，则反向代理到“反向代理地址”
        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass “反向代理地址”;
        }
}