前端跨域時需要攜帶 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，那么這種跨域情況就不會出現。