跨域問題導致設置 cookie 不生效

我們看下跨域不生效的問題，首先拋出兩個問題：

1. 我們如何設置 cookie ？
2. 又如何確定 cookie 設置是否生效了 ？

首先，我們實現一個簡單的介面,新建一個 test.js 文件，將如下代碼複製進去，通過 node test.js 啟動服務，在本地就可以通過 http://localhost:3000/rest/collect/event/h5/v1/ 來訪問了我們創建的介面了（node 環境安裝的教程網上有很多詳細的教程，本文不再贅述）

var express = require(express);var app = express();var URL = require(url)var path = require(path);app.post(/rest/collect/event/h5/v1/, function(req, res) { res.cookie(token,11111112222222224444444444) res.cookie(httpOnly-token,11111112222222224444444444,{ httpOnly: true }) function User() { this.name; this.city; this.age; } var user = new User(); if(params.id == 1) { user.name = "ligh"; user.age = "1"; user.city = "北京市"; }else{ user.name = "SPTING"; user.age = "1"; user.city = "杭州市"; } var response = {status:1,data:user}; res.send(JSON.stringify(response));});app.listen(3000);console.log(Listening on port 3000...);

訪問效果如下

在前端代碼中訪問我們的介面

在瀏覽器中我們可以看到請求的 Resopnse Headers 里，有兩個 set-cookie頭部，區別在於一個帶有 HttpOnly的標識，我們打開瀏覽器的調試窗口Application我們可以看到，兩個數值都被設置到瀏覽器里了，httpOnly的值在瀏覽器調試窗口的http一欄，打了個小勾，說明這個變數是只能通過 http 請求來獲取到這個cookie ，前端無法通過 js 的 document.cookie來獲取到

講到這塊內容，我們順便講下 cookie 設置的其他參數的作用

cookie 和域名相關的喲，Domain 變數表示 cookie 生效的域名，expries和max-age表示 cookie 的有效時間

問題描述及解決

在開發階段我自己用node 簡單的寫了一個介面，便於聯調前端傳參問題，希望通過 http 的set-cookie 存儲變數， 但是卻始終沒有把 cookie 成功設置到瀏覽器里，經過排查發現是跨域導致的 cookie 設置不生效

不生效的原因是我本地項目啟動在 http://localhost:70,但是調用的介面在 http://localhost:3000上，埠不一樣，存在跨域的問題，所以雖然在 Response Header 里看到了set-cookie的操作，但是在瀏覽器的 application里看到，並沒有被設置進來，解決辦法，通過nginx 代理（最長用的跨域解決辦法）

擴展

跨域的問題在開發過程中比較常見，我們經常會碰到，簡單來說只要請求資源的協議，域名，埠不一致，都會導致跨域，網上的解決方法也比較多，比較成熟，本文不做擴展，附帶幾個鏈接供大家參考

跨域中的預檢測請求

推薦閱讀：