Node.js Chrome get Set cookie标头，但不会将其放入新请求中

我正在开发一款移动应用程序，前端使用React Native，后端使用NodeJs。我为此应用程序设置了身份验证机制。后端工作正常。我和邮递员试过了。在使用正确数据进行登录请求后，服务器在“设置cookie”标题中向我发送cookie。然后我把我的下一个请求头作为“cookie”，我得到了我的数据。但是，当我使用React Native part时，它的工作方式不同。我现在正在使用Chrome browser来测试应用程序，我可以看到浏览器得到一个带有登录请求响应的设置cookie头（另外我还看到服务器创建了一个包含用户信息的新cookie）。但是对于下一个请求（比如说它的“/主页”），它不会将cookie发送回服务器，因此服务器不会识别用户，并创建一个新cookie（其中没有用户信息）并返回403响应

人们建议你应该做一些解决方案。我在这里分享这些，但没有一个对我有用

在您的请求或axios对象中放置withwith credentials:true（未解决问题）

为服务器中的cookie设置httpOnly:false（未解决问题）

将corsOptions设置为var corsOptions={origin:'*'，credentials:true，exposedHeaders:[“set Cookie”]}；（仍不工作）

我还使用通用cookie库从前端访问cookie数据，但它也无法访问cookie值

在url中使用127.0.0.1而不是“localhost”也不起作用（有些人说cookie在一级域中不起作用）

这是我的React原生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）看，不达到“设置cookie”是正常的。（尽管在一些网站上，据说你可以在cookie设置中设置httpOnly:false，它解决了这个问题）。 因此，如果我没有到达前端代码中的头，这实际上并不重要。我的响应标题中有“设置cookie”标题，chrome无法识别cookie并将其放入f12的cookies部分（也没有将其设置在请求标题中）。这就是问题所在

编辑2：我对我的问题有一些想法

• 由于我正在使用React Native，并且它不应该在Chrome浏览器中工作，因此可能会导致浏览器没有设置cookie。我将创建一个react项目，并尝试从那里访问cookie我解决了问题，但与该问题无关。虽然我在测试react应用程序时解决了这个问题

• 我的react本机代码出现“service worker.js”错误。它看起来不会影响代码的功能，但可能会以某种方式影响此cookie情况=>解决问题后，我仍然收到此错误，因此与此无关。

---

我还尝试了react-native cookie应用程序（react-native cookie），但它的代码仅适用于android或ios，因此不适用于浏览器。

我解决了我的问题。看起来我的代码有两个问题。第一个是在具有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的同源策略。我使用的是Windows10，所以我打开了下面的搜索栏并粘贴到了那里

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

新的chrome浏览器打开时没有web安全策略。然后，我的react应用程序工作正常。我可以使用文档访问cookie。cookie，也可以在f12的“应用程序选项卡>>cookie”下查看我的cookie。所以谷歌浏览器保存了我的cookie。在同一个chrome窗口中，我运行我的react原生应用程序，它也成功运行。所以我认为这只是因为chrome的安全策略和更改我的cors设置，我又开始出错了

总之，我必须改变两件事

Cors模块不工作，我手动设置了标题，它们工作正常。

我不得不禁用Chrome的同源策略

---

浏览器阻止前端JavaScript代码访问集合Cookie头。Fetch规范要求浏览器阻止前端代码访问它；Fetch规范要求该阻塞。请参阅，其中Set Cookie定义为禁止的响应头名称，必须从暴露于前端代码的任何响应中过滤掉。另请看，我刚刚对“set cookie”标题做了一些研究，看起来设置httpOnly:false应该可以解决Js（前端）的访问问题，cookie设置为set cookie标题（没有看到我可以使用的任何其他标题）。所以这一定是一种将set cookie与JS结合使用的方法。虽然如果一切顺利，我也不必去拿那块饼干。Chrome应自动将其设置为响应。就我而言，不是这样。这就是问题所在，我也有同样的问题，但是使用带有默认选项的cors对我来说是可行的。不确定在禁用安全性的情况下运行是一种方式。部署后是否遇到与Cookie相关的问题？