前端跨域时需要携带 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: 关于指定域名 可以在后端用个array类似的存一个白名单域名列表
如果有请求 先判断 Origin 是否在白名单里 然后再动态设置 Access-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，那么这种跨域情况就不会出现。