Chrome 獲取 Set-cookie 標頭但未將其放入新請求中

Question

我正在使用前端使用React Native和后端使用 NodeJ 的移動應用程序。 我為這個應用程序設置了身份驗證機制。 后端工作正常。 我已經用郵遞員測試過。 使用正確數據登錄請求后，服務器在“ Set-cookie”標頭中向我發送一個 cookie。 然后我把我的下一個請求標頭作為“cookie”，我得到了我的數據。 但是，當我使用 React Native 部分時，它的工作方式有所不同。 我現在正在使用Chrome 瀏覽器來測試應用程序，我可以看到瀏覽器獲取了一個 set-cookie 標頭，其中包含來自登錄請求的響應（另外我已經看到服務器創建了一個包含用戶信息的新 cookie）。 但是對於下一個請求（比如它的“/home”），它不會發回 cookie，因此服務器無法識別用戶並創建一個新的 cookie（其中沒有用戶信息）並返回 403 響應。

人們建議您應該執行一些解決方案。 我在這里分享這些，但沒有一個對我有用。

1. put with withCredentials: true在您的請求或 axios 對象中（沒有解決問題）
2. 在服務器中為 cookie 設置httpOnly:false （沒有解決問題）
3. 將 corsOptions 設置為 var corsOptions = { origin: '*',credentials: true， exposedHeaders: ["Set-Cookie"] }; （還是行不通）
4. 我也使用universal-cookie庫從前端獲取cookie數據，但是也無法到達cookie值
5. 在 url 中使用127.0.0.1 而不是“localhost”也不起作用（有人說 cookie 在一級域中不起作用）

這是我的 React Native - Axios 代碼

const axiosObj = axios.create({
    baseURL:"http://localhost:3000/",
    headers: {
      'Content-Type': 'application/json',
    },
    responseType: 'json',
    withCredentials: true, 
  });

export function get(url){
    return new Promise(function(resolve,reject){
        axiosObj.get(url).then(res => {
            console.log(res)
            return res.data
        })
    }) 
};

export function post(url,data){
    return new Promise(function(resolve,reject){
        axiosObj.post(url,data).then(res => {
            console.log(res.headers)
            const cookies = new Cookies(res.headers.cookie);
        console.log("document cookie",document.cookie)    
        console.log(cookies.getAll()); 
            resolve(res)
        })
    }) 
}

在后端這里是相關的代碼

 var app = express();
app.use(cookieParser('keyboard cat'));


var corsOptions = {
  origin: '*',
  credentials: true,
  exposedHeaders: ["Set-Cookie"]
 };
app.use(cors(corsOptions))
app.use(logger('dev'));
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

//session settings
app.use(session({
  genid: (req) => {
    console.log('Inside the session middleware')
    console.log(req.sessionID)
    return uuidv4(); // use UUIDs for session IDs
  },
  store: new FileStore(),
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { httpOnly: false,
    expires: new Date(Date.now() + (30 * 86400 * 1000))}
}))

這是我登錄后在服務器上的會話文件

{"cookie":{"originalMaxAge":2591995208,"expires":"2020-09-22T20:22:56.993Z","httpOnly":false,"path":"/"},"passport":{"user":{"_id":"5f307fc99f5c667918a56122","username":"test","__v":0}},"__lastAccess":1598214181785}

這里可能有什么問題？ 有任何想法嗎？

編輯：我了解到從前端（JS）沒有達到“Set-cookie”是正常的。 （盡管在某些網站中，它說您可以在 cookie 設置中設置httpOnly: false並解決此問題）。 因此，如果我沒有到達前端代碼中的標題，實際上並不重要。 我的響應標頭中有“set-cookie”標頭， chrome 無法識別 cookie 並將其放在 f12 的 cookies 部分（也沒有在 req.header 中設置）。 這就是問題所在

編輯 2：我對我的問題有一些想法。

• 由於我正在使用 React Native 並且它不應該在 Chrome 瀏覽器中工作，因此可能會以某種方式導致瀏覽器未設置 cookie。 我將創建一個反應項目並嘗試從那里訪問 cookie。 =>我解決了與該問題無關的問題。 雖然我在測試應用程序時解決了問題

• 我的 react-native 代碼出現“service-worker.js”錯誤。 看起來它不會影響代碼的功能，但它可能會以某種方式影響這種 cookie 情況 =>解決問題后，我仍然遇到此錯誤，因此與此無關。

我還嘗試了用於 cookie 的本機應用程序 (react-native-cookie)，但它的代碼僅適用於 android 或 ios，因此不適用於瀏覽器。

Answer 1

我解決了我的問題。 看起來我的代碼有兩個問題。 第一個是在帶有 cors 設置的服務器中。 第一個版本是這樣的：

var cors = require('cors');
var corsOptions = {
  origin: '*',
  credentials: true,
  exposedHeaders: ["set-cookie"]
 };
app.use(cors(corsOptions))

所以基本上我使用 cors 模塊進行設置。 當我為測試創建一個 React 應用程序時，我收到了一個 cors 錯誤（原點錯誤）。 不知何故，我的 cors 設置不適用於圖書館。 所以我用下面的代碼更改了這段代碼。

app.use(function (req, res, next) {
     // Website you wish to allow to connect
     res.setHeader('Access-Control-Allow-Origin', '*');
     // Request methods you wish to allow
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
     // Request headers you wish to allow
     res.setHeader('Access-Control-Allow-Headers', 'Origin,X-Requested-With,content-type,set-cookie');
     // Set to true if you need the website to include cookies in the requests sent
     // to the API (e.g. in case you use sessions)
     res.setHeader('Access-Control-Allow-Credentials', true);
  
     // Pass to next layer of middleware
     next();
   });

我仍然有一些 cors 錯誤。 您可能會收到 cors 錯誤的另一個原因是 chromes 同源策略。 我使用的是 Windows 10，所以我打開了下面的搜索欄並粘貼到那里

 chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

一個新的 chrome 瀏覽器打開，沒有網絡安全策略。 然后我的反應應用程序工作正常。我可以使用document.cookie訪問 cookie，也在應用程序選項卡 >> cookie 下的 f12 中，我可以看到我的 cookie。 所以谷歌瀏覽器保存了我的 cookie。 在同一個 chrome 窗口中，我運行我的本機應用程序，它也成功運行。 所以我認為這只是因為 chrome 的安全策略並將我的 cors 設置改回來，我又開始出現錯誤。

所以總而言之，我必須改變兩件事。

1. Cors 模塊不起作用，我手動設置標題並且它們工作正常。
2. 我不得不禁用 Chrome 的同源策略