此貼接上貼實踐解決跨域問題的三種方式剖析

今天繼續做我的schub項目的時候，遇到了苦惱我一天的問題，expresss-session沒有持久化，我在后端把登錄的狀態存在req的session里，下次發post的時候再發請求的時候req.session里面存的用戶的狀態的字段沒了。

我上次用到express-session的時候還是做得那個微博系統，前后端雜糅的項目（node+ejs），那時候就沒遇到這個問題，后來排查這個問題的時候，google 網上有關express-session的項目，發現這些項目全是前后端在一起的架構，然后我就意識到一個問題，前后端在一起域名和端口都是一致的，當前后端分離在本地調試的時候，我處理了很多跨域問題，那么現在，是不是由跨域問題引起的。

我本地打印調試了fetch發送的請求，（因為跨域每次請求發了一個option），發現每次的session都是新的，sessionId不同，那么怎么保持session會話一致呢。

后來差文檔，發現：

對于跨域 XMLHttpRequest 或 Fetch 請求，瀏覽器不會發送身份憑證信息。如果要發送憑證信息，需要設置 XMLHttpRequest 的某個特殊標志位。對于附帶身份憑證的請求，服務器不得設置 Access-Control-Allow-Origin 的值為“*”。

用了Access-Control-Allow-Credentials: true，就不能設置Access-Control-Allow-Origin:'*'了。所以可以設置，當A用戶進來的時候，我們設置A用戶為白名單就好，同理B用戶也是。也就是說，誰訪問就把誰的域設置為白名單就可以了。

Access-Control-Allow-Origin: <origin> | *

所以我的處理一般是：

app.all('/*', (req, res, next) => {res.setHeader('Access-Control-Allow-Origin', req.headers && req.headers.origin ? req.headers.origin : '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie, Authorization');res.setHeader('Access-Control-Allow-Credentials', true);//post請求之前，會發送一個options的跨域請求if (req.method === 'OPTIONS') {res.sendStatus(200);} else {next()} })

由于前端react里面請求是fetch發送的，fetch的原理就是xhr+promise,
那么fetch肯定也有這么一個維持身份憑證的消息頭，

看MDN：

XMLHttpRequest.withCredentials 屬性是一個Boolean類型，它指示了是否該使用類似cookies,authorization headers(頭部授權)或者TLS客戶端證書這一類資格證書來創建一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用withCredentials屬性是無效的。此外，這個指示也會被用做響應中cookies 被忽視的標示。默認值是false。如果在發送來自其他域的XMLHttpRequest請求之前，未設置withCredentials 為true，那么就不能為它自己的域設置cookie值。而通過設置withCredentials 為true獲得的第三方cookies，將會依舊享受同源策略，因此不能被通過document.cookie或者從頭部相應請求的腳本等訪問。

三點信息：
1.跨域訪問中，只有帶上withCredentials=true才會允許跨域的請求中帶上自己cookie，（authorization）而cookie中是存有sessionId的，所以也是保持會話一致的前提。
2.同域名下的這個參數是無效的。
3.通過這種方法攜帶的cookie依然受同源策略的限制，我們不能直接通過前端手段或者腳本訪問到改cookie。

所以我在react前端把所有的fetch的options中加上

credentials: 'include',

即可。此時發現每次fetch請求的session是同一個了。

轉載于:https://www.cnblogs.com/zhangmingzhao/p/9448265.html

總結

以上是生活随笔為你收集整理的跨域问题(续)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。