前端跨域时须要携带 Cookie 的状况（处理方法）

【前端携带 Cookie 跨域时，请求失败的状况，后端拿不到该 Cookie】

项目是 Vue + axios + nginx ，项目开发中，遇到了一个问题，就是前端请求了后端的某个接口，后端经过这个接口要重定向到另外一个网页，这就涉及到了跨域问题，而该项目须要携带后端存回来的一个Cookie，把这个Cookie放在请求里，再返回给后端，用来判断该Cookie是否存在或是否正确。

可是此时出现了一个问题，就是Cookie没法携带在请求里，后端没法正常拿到该Cookie，致使请求失败，没法得到想要的结果。由于这个请求存在跨域，而Cookie在跨域请求中，须要进行设置，设置内容以下：

前端的 axios 须要配置一个属性，该属性控制“跨域是否携带Cookie”：

axios.defaults.withCredentials = true;

前端设置了withCredentials为true后，必须后端也配合进行设置

后端设置：Access-Control-Allow-Credentials 设置为 true

后端不能把 Access-Control-Allow-Origin 设置为 “” 或 *，而要设置为客户端发送请求时的IP地址。

ps: 关于指定域名 能够在后端用个相似的存一个白名单域名列表
若是有请求 先判断  是否在白名单里 而后再动态设置 arrayOriginAccess-Control-Allow-Origin

Nginx 也能够进行跨域请求的设置：

　　　　　　　set $origin '*';
            if ($http_origin) {
                set $origin "$http_origin";
            }

            add_header Access-Control-Allow-Origin "$origin";
            add_header Access-Control-Allow-Credentials "true";
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'Origin,Access-Control-Request-Headers,Access-Control-Allow-Headers,DNT,X-Requested-With,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-M
odified-Since,Cache-Control,Content-Type,Accept,Connection,Cookie,X-XSRF-TOKEN,X-CSRF-TOKEN,Authorization';

上面这段代码，写在你须要跨域的代理 location 里。

 

简单总结一下：

通常的项目，出现跨域在后端设置就行，前端中若是用到 withCredentials: true，那么后端须要设置 response.setHeader("Access-Control-Allow-Credentials", "true")，才能使 Cookie 携带上来，同时，Access-Control-Allow-Origin 这个白名单须要设置当前前端访问时的浏览器上的域名或IP。

若是项目打包部署上线后，全部访问地址都是同一个域名IP，那么这种跨域状况就不会出现。