Question

我有一个http://localhost:3000上运行的React Web应用。

此网络应用访问一个远程API，即https://app.example.com/api。

在API上执行登录时，服务器将返回一个会话Cookie，如下所示：

Set-Cookie: JSESSIONID=ZmQ2Yzg4OWYtYzdiNi00Mzc1LTkzMzUtYzhiZjZmM2MzZjMy; Domain=app.example.com; Path=/api/; Secure; HttpOnly; SameSite=Lax

但是，在Chrome上，Set-Cookie不会出现在响应标题列表中。另外，如果我重新发送相同的请求，Chrome不会在请求标头中包含Cookie。

因此，我的理解是它忽略了Cookie。为什么？

关于CORS，我看不到任何问题，并且Chrome已正确发送了请求。这是预检中返回的CORS标头：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: PATCH,GET,POST,PUT,DELETE
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Expose-Headers: ETag, X-XSRF-TOKEN

我尝试将本地DNS条目app.me pointig添加到127.0.0.1，但仍然无法正常工作。

我也尝试过Edge，可以看到出现了Set-Cookie标头，但是cookie似乎也没有设置。

编辑：

这是Axios代码：

const axios = require('axios');

const backendUrl = 'https://app.example.com/api';
const constructUrl = url => `${backendUrl}${url}`;

const axiosConfig = {
  withCredentials: true,
};

export default {
  get: url => axios.get(constructUrl(url), axiosConfig),
  post: (url, data) => axios.post(constructUrl(url), data, axiosConfig),
  put: (url, data) => axios.put(constructUrl(url), data, axiosConfig),
  delete: (url, data) => axios.delete(constructUrl(url), data, axiosConfig),
};

//And in a different file...

HttpService.post('/login', creds)
        .then((response) => {
          const userInfo = response.data;
          const token = response.headers['x-xsrf-token'];
          sessionStorage.setItem('user-info', JSON.stringify(userInfo));
          sessionStorage.setItem('user-xsrf-token', JSON.stringify(token));

          window.location.replace('/');
        })
        .catch((err) => {
          if (err.response.status === 401) {
            setLoginError('Bad cred');
          } else {
            setLoginError('Fail to auth');
          }
        });

Answer 1

首先，由于某种原因，我无法使Chrome显示与其他域相关联的Cookie（地址栏内未提及）。因此，在地址栏中，我有http://localhost:3000，但看不到与app.example.com关联的cookie。同样，出于相同的原因，开发工具不会显示Set-Cookie（响应）和Cookie（请求）。但这并不意味着未收到并设置Cookie。

但是，在我的情况下，由于存在SameSite=Lax而未设置Cookie。

删除此cookie属性后，将设置cookie并将其包含在下一个请求中。

本地主机Web应用访问远程API时未设置Cookie

1 个答案: