WEB前端跨域解决方案

基于前后端分离的架构，后端使用nginx做反向代理，要支持跨域访问，需要通过前后端同时增加配置可以解决。

前端访问后台接口跨域，错误信息：
Access to XMLHttpRequest at ‘http://b.test.com’ from origin ‘ttp://a.test.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

首先，前端：
允许携带目标接口域名的Cookie
ajax或vue组件调用接口的时候，使用XHR提供的属性：withCredentials:true，发送出去的请求将携带Cookie。
如：
当前页面为a.test.com
目标接口为b.test.com

function post() {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
switch (xhr.readyState) {
case 0: {
console.log(‘open方法已经调用，但是send方法没有调用’)
break;
}
case 1: {
console.log(‘send方法已经调用，但是服务器没有返回数据’)
break;
}
case 2: {
console.log(‘send方法已经调用，服务器开始返回数据’)
break;
}
case 3: {
console.log(‘服务器已经返回部分数据’)
break;
}
case 4: {
console.log(‘服务器已经返回全部的数据’)
console.log(xhr.responseText)
break;
}
}
}
xhr.withCredentials = true;
xhr.open(‘POST’, ‘http://b.test.com/api’, true)
xhr.send()
}

其次，后端：
nginx配置Access-Control-Allow-Origin允许跨域。
接收b.test.com的nginx配置中，location 中增加消息头：
add_header Access-Control-Allow-Origin *;
允许所有来源的跨域访问。
如果不期望所有来源(a.test.com与其他所有之外的域名也可以跨域），那么可以如下设置跨域白名单：

先配置nginx的map：
map $http_origin $allow_origin {
default 0;
“~^http://a.test.com” http://a.test.com;
“~^http://c.dev.com” http://a.dev.com;
}

然后在b.test.com的location中增加配置
add_header Access-Control-Allow-Origin $allow_origin;
意思为当访问b.test.com的api的接口，来源是http://a.test.com则给response增加header
Access-Control-Allow-Origin:http://a.test.com；

做到这里，POST请求已经可以正常使用，如果使用原生XHR访问，已经可以了，但是如果使用axios等功能完备的组件，还是不行，因为axios会先发送一个options请求，用来校验跨域的权限，服务器允许跨域，才执行post请求。
所以，添加配置参考：

location /user/ {
            proxy_set_header Host $host:$server_port;
            proxy_set_header   Referer $http_referer;
            *add_header Access-Control-Allow-Credentials true;*
            add_header Access-Control-Allow-Origin  $allow_origin;
            if ($request_method = 'OPTIONS') {
                *add_header Access-Control-Allow-Credentials true;*
                add_header Access-Control-Allow-Origin  $allow_origin;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                add_header Access-Control-Allow-Headers User-Agent,Cache-Control,Content-Type,Keep-Alive;
                add_header Access-Control-Max-Age 3600;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
               }
            proxy_pass http://user;
        }

如果未添加 add_header Access-Control-Allow-Credentials true;
浏览器会报错：

Access to XMLHttpRequest at ‘http://b.test.com’ from origin ‘http://a.test.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

最后：
这两步做完已经足够正常使用，携带cookie让后端校验登录状态，后端正常返回数据。