angular + nodejs + CORS 實現跨域不丟失cookie做法

CarterLi 發布于2019-08-23 16:27 / 3449人閱讀

摘要：想要做一個的登錄需要解決的問題的端口向的端口發送一個請求這會造成跨域問題跨域，指的是瀏覽器不能執行其他網站的腳本。

想要做一個angular + nodejs 的登錄

需要解決的問題

angular的4200端口向 nodejs的8080端口發送一個post請求, 這會造成跨域問題,

跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制
只有協議，域名，端口完全相同了才算同一個域，不同域之間不允許通信

CORS 解決跨域問題

jsonp 是一種解決方案, 但是 CORS 更優雅

CORS 跨域資源共享（Cross-Origin Resource Sharing）
了解原理請移步 http://www.ruanyifeng.com/blo...

這里只講做法

nodejs 后端代碼

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});

解決一般的跨域,就這樣寫就夠了

默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)，通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據。

后端收到這種請求的時候, 不會檢測 cookie 里面的數據

沒了 cookie session 自然也就無效了

如果你的請求需要使用到 cookie

前端angular需要這樣寫

// {withCredentials: true} withCredentials 表示是否傳遞憑證，就是cookie
this.http.get(this.hostName + "/captcha", {withCredentials: true}).subscribe((data) => {
  
});

后端也需要返回 cookie
res.header("Access-Control-Allow-Credentials", true);// Allow Cookie

app.use((req, res, next) => {
    // req.headers.origin
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", true);// Allow Cookie
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

這樣寫會報錯, 因為有 cookie 的話, Access-Control-Allow-Origin 就不能寫 "*" 了

可以把 Access-Control-Allow-Origin 改成訪問者的ip+端口, 如:
res.header("Access-Control-Allow-Origin", "http://localhost:4200");

但是, 訪問者是動態的, 怎么知道訪問者的ip, req.headers.origin 就是訪問者的ip和端口

最終寫法

app.use((req, res, next) => {
    // 需要使用cookie的話,是不能寫 * 的,必須寫具體的域, 像這樣
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Credentials", true);// Allow Cookie
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

GPU云服務器云服務器跨域cookie java跨域cookie共享實現跨域 js實現跨域訪問

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103050.html

HTML5 安全問題解析

摘要：本地安全問題在之前引入了本地這個東西，但是后面被廢除了，他的安全點和后臺數據庫的關注點差不多，就是要防止在數據中混入查詢指令。僵尸網絡風險中解決了單線程問題，提出了機制，它為提供多線程支持，但是多線程帶來了一個非常可怕的危險僵尸網絡。 HTML5 安全問題解析標簽： html html5 web安全本文參考： w3school:html5相關基礎知識（w3school.com.c...

maybe_009 2019-08-01 14:51 評論0 收藏0
前端常見跨域解決方案（全）

摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協議的一部分。什么是跨域？跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。廣義的跨域： 1.) 資源跳轉： A鏈接、重定向、表單提交 2.) 資源...

canger 2019-07-25 15:04 評論0 收藏0
同源策略與跨域

摘要：簡單地理解就是因為同源策略的限制，它是瀏覽器為了安全性考慮一種非常重要的策略，域名下的無法操作或是域名下的對象。同源策略會限制以下三種行為和無法讀取。例如中可以引用等資源，此類操作不受同源策略限制。同源策略同源策略same origin policy中的重要內容就是URL（uniform resource locator）,統一資源定位符，俗稱網址。URL中的resource資源就...

xavier 2019-08-26 12:09 評論0 收藏0