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