成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

跨域問題導(dǎo)致設(shè)置 cookie 不生效

Taste / 1687人閱讀

摘要：我們看下跨域不生效的問題，首先拋出兩個(gè)問題我們?nèi)绾卧O(shè)置又如何確定設(shè)置是否生效了首先，我們實(shí)現(xiàn)一個(gè)簡單的接口新建一個(gè)文件，將如下代碼復(fù)制進(jìn)去，通過啟動(dòng)服務(wù)，在本地就可以通過來訪問了我們創(chuàng)建的接口了環(huán)境安裝的教程網(wǎng)上有很多詳細(xì)的教程，本文不再贅

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

我們?nèi)绾卧O(shè)置 cookie ？


又如何確定 cookie 設(shè)置是否生效了 ？

首先，我們實(shí)現(xiàn)一個(gè)簡單的接口,新建一個(gè) test.js 文件，將如下代碼復(fù)制進(jìn)去，通過 node test.js 啟動(dòng)服務(wù)，在本地就可以通過 http://localhost:3000/rest/collect/event/h5/v1/ 來訪問了我們創(chuàng)建的接口了（node 環(huán)境安裝的教程網(wǎng)上有很多詳細(xì)的教程，本文不再贅述）

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 里，有兩個(gè) set-cookie頭部，區(qū)別在于一個(gè)帶有 HttpOnly的標(biāo)識，我們打開瀏覽器的調(diào)試窗口Application我們可以看到，兩個(gè)數(shù)值都被設(shè)置到瀏覽器里了，httpOnly的值在瀏覽器調(diào)試窗口的http一欄，打了個(gè)小勾，說明這個(gè)變量是只能通過 http 請求來獲取到這個(gè)cookie ，前端無法通過 js 的 document.cookie來獲取到

講到這塊內(nèi)容，我們順便講下 cookie 設(shè)置的其他參數(shù)的作用

cookie 和域名相關(guān)的喲，Domain 變量表示 cookie 生效的域名，expries和max-age表示 cookie 的有效時(shí)間

問題描述及解決

在開發(fā)階段我自己用node 簡單的寫了一個(gè)接口，便于聯(lián)調(diào)前端傳參問題，希望通過 http 的set-cookie 存儲(chǔ)變量， 但是卻始終沒有把 cookie 成功設(shè)置到瀏覽器里，經(jīng)過排查發(fā)現(xiàn)是跨域?qū)е碌?cookie 設(shè)置不生效

不生效的原因是我本地項(xiàng)目啟動(dòng)在 http://localhost:70,但是調(diào)用的接口在 http://localhost:3000上，端口不一樣，存在跨域的問題，所以雖然在 Response Header 里看到了set-cookie的操作，但是在瀏覽器的 application里看到，并沒有被設(shè)置進(jìn)來，解決辦法，通過nginx 代理（最長用的跨域解決辦法）

擴(kuò)展

跨域的問題在開發(fā)過程中比較常見，我們經(jīng)常會(huì)碰到，簡單來說只要請求資源的協(xié)議，域名，端口不一致，都會(huì)導(dǎo)致跨域，網(wǎng)上的解決方法也比較多，比較成熟，本文不做擴(kuò)展，附帶幾個(gè)鏈接供大家參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93157.html

相關(guān)文章

  • cookie與session詳解

    摘要：所謂的無連接就是服務(wù)器收到了客戶端的請求之后，響應(yīng)完成并收到客戶端的應(yīng)答之后，即斷開連接。從而節(jié)省傳輸時(shí)間。協(xié)議對事務(wù)的處理沒有記憶能力。這種方式某種方面上講解放了服務(wù)器，但是卻不利于客戶端與服務(wù)器的連接。 session與cookie是什么? session與cookie屬于一種會(huì)話控制技術(shù).常用在身份識別，登錄驗(yàn)證，數(shù)據(jù)傳輸?shù)?舉個(gè)例子，就像我們?nèi)コ匈I東西結(jié)賬的時(shí)候，我們要拿出我...

    SwordFly 評論0 收藏0

  • Response Headers 的 Set-Cookie 前端讀取不到 ?

    摘要：可選的最長有效時(shí)間，格林尼治標(biāo)準(zhǔn)時(shí)間。如果不傳表示這是一個(gè)會(huì)話期。默認(rèn)值為當(dāng)前文檔訪問地址的主機(jī)名不包含子域名。設(shè)置的目錄及其子目錄都生效。可選設(shè)置了屬性的不能使用經(jīng)由屬性和進(jìn)行訪問以防范跨站腳本攻擊。 問題 描述 先看下后臺(tái)返回的Set-Cookie字段：showImg(https://segmentfault.com/img/bVbulhz?w=858&h=128);查看瀏覽器Co...

    zhangqh 評論0 收藏0

  • 跨域，拒絕說概念，上demo

    摘要：文章列出解決方案以及對應(yīng)的，拒絕說概念，不在稀里糊涂。服務(wù)器據(jù)此決定，該實(shí)際請求是否被允許。在有效時(shí)間內(nèi)，瀏覽器無須為同一請求再次發(fā)起預(yù)檢請求。請注意，瀏覽器自身維護(hù)了一個(gè)最大有效時(shí)間，如果該首部字段的值超過了最大有效時(shí)間，將不會(huì)生效。 文章列出解決方案以及對應(yīng)的demo， 拒絕說概念，不在稀里糊涂。 什么情況出現(xiàn)跨域？ 協(xié)議不同 域名不同 端口不同 跨域解決方案 1.同一個(gè)主域下...

    IamDLY 評論0 收藏0

  • 前端面試--網(wǎng)絡(luò)

    摘要：從前發(fā)送請求后需等待并收到響應(yīng)，才能發(fā)送下一個(gè)請求。第二次握手接收到包后就返回一個(gè)，隨機(jī)數(shù)，包以及一個(gè)自己的包，然后等待的回復(fù)，進(jìn)入狀態(tài)已接收狀態(tài)。 1.Http協(xié)議 1.1 Http結(jié)構(gòu)圖 showImg(https://segmentfault.com/img/bVbsrzu?w=1240&h=702); 1.2 什么是Http協(xié)議 HTTP協(xié)議是Hyper Text Transf...

    calx 評論0 收藏0

  • nginx解決跨域問題

    摘要：一產(chǎn)生跨域的原因?yàn)g覽器限制跨域請求二解決思路解決跨域有多重，在這里主要講用解決跨域代理瀏覽器禁止檢查跨域三下載安裝下載地址選擇其中一個(gè)版本下載，再解壓即可使用在目錄下輸入，若出現(xiàn)版本號，則安裝成功四反向代理解決跨域客戶端解決跨域我們使用的 一. 產(chǎn)生跨域的原因 1.瀏覽器限制 2.跨域 3.XHR（XMLHttpRequest）請求 二. 解決思路 解決跨域有多重，在這里主要講用ngi...

    Jeffrrey 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<