跨域問題致使設置 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 代理（最長用的跨域解決辦法）

擴展

跨域的問題在開發過程當中比較常見，咱們常常會碰到，簡單來講只要請求資源的協議，域名，端口不一致，都會致使跨域，網上的解決方法也比較多，比較成熟，本文不作擴展，附帶幾個連接供你們參考

跨域中的預檢測請求
CORS 跨域中的 Cookie
跨域資源共享 CORS 詳解
Web開發中跨域的幾種解決方案