跨域会话 Cookie（Heroku 上的 Express API + Netlify 上的 React App）

Question

我有一个 React 应用程序调用 node.js/Express 中的 API。

前端部署在 Netlify (https)，​​后端部署在 Heroku (https)。

我的问题：

• 在开发环境（本地主机）中工作的一切
• 在生产（Netlify/Heroku）中，用于注册和登录的 api 调用似乎有效，但会话 cookie 未存储在浏览器中。因此，对 API 中受保护路由的任何其他调用都会失败（因为我没有收到用户凭据）。

             

说话很便宜，给我看代码....

后端（Express API）：

• 我正在使用护照（本地策略）、express-session、cors。

应用程序.js

require('./configs/passport');

// ...

const app = express();

// trust proxy (https://stackoverflow.com/questions/64958647/express-not-sending-cross-domain-cookies)
app.set("trust proxy", 1); 

app.use(
  session({
    secret: process.env.SESSION_SECRET,
    cookie: {
      sameSite: process.env.NODE_ENV === "production" ? 'none' : 'lax',
      maxAge: 60000000,
      secure: process.env.NODE_ENV === "production",
    },
    resave: true,
    saveUninitialized: false,
    ttl: 60 * 60 * 24 * 30
  })
);

app.use(passport.initialize());
app.use(passport.session());

// ...


app.use(
  cors({
    credentials: true,
    origin: [process.env.FRONTEND_APP_URL]
  })
);

//...

app.use('/api', require('./routes/auth-routes'));
app.use('/api', require('./routes/item-routes'));

CRUD 端点（例如 item-routes.js）：

// Create new item
router.post("/items", (req, res, next) => {
    Item.create({
        title: req.body.title,
        description: req.body.description,
        owner: req.user._id // <-- AT THIS POINT, req.user is UNDEFINED
    })
    .then(
        // ...
    );
});

前端（反应应用程序）：

• 使用 Axios 并将“withCredentials”选项设置为 true...

用户注册和登录：

class AuthService {
  constructor() {
    let service = axios.create({
      baseURL: process.env.REACT_APP_API_URL,
      withCredentials: true
    });
    this.service = service;
  }
  
  signup = (username, password) => {
    return this.service.post('/signup', {username, password})
    .then(response => response.data)
  }

  login = (username, password) => {
    return this.service.post('/login', {username, password})
    .then(response => response.data)
  }
   
  //...
}

创建一个新项目...：

    axios.post(`${process.env.REACT_APP_API_URL}/items`, {
        title: this.state.title,
        description: this.state.description,
    }, {withCredentials:true})
    .then( (res) => {
        // ...
    });

Answer 1

简短的回答：

它没有按预期工作，因为我在 Chrome Incognito 上进行测试，并且默认情况下，Chrome 在隐身模式下阻止第三方 cookie（更多详细信息）。

下面是一个列表，其中包含一些要检查的事项，如果您遇到类似问题；)

清单

如果有帮助，这里有一个清单，其中包含您主要需要的不同内容；)

• （后端）添加“信任代理”选项

如果您在 Heroku 上部署，请添加以下行（您可以在会话设置之前添加它）。

app.set("trust proxy", 1);

• （后端）检查您的会话设置

特别是，检查选项sameSite和secure（更多详细信息在这里）。

下面的代码将设置sameSite: 'none'并secure: true在生产中：

app.use(
  session({
    secret: process.env.SESSION_SECRET || 'Super Secret (change it)',
    resave: true,
    saveUninitialized: false,
    cookie: {
      sameSite: process.env.NODE_ENV === "production" ? 'none' : 'lax', // must be 'none' to enable cross-site delivery
      secure: process.env.NODE_ENV === "production", // must be true if sameSite='none'
    }
  })
);

• （后端）CORS 配置

app.use(
  cors({
    credentials: true,
    origin: [process.env.FRONTEND_APP_URL]
  })
);

• （后端）环境变量

在 Heroku 中设置环境变量。例如：

FRONTEND_APP_URL = https://my-project.netlify.app

重要提示：对于 CORS URL，避免在末尾使用斜杠。以下可能不起作用：

FRONTEND_APP_URL = https://my-project.netlify.app/ --> avoid this trailing slash!

• （前端）发送凭据

确保您在 API 调用中发送凭据（您需要为对 API 进行的所有调用执行此操作，包括用户登录调用）。

如果您使用的是 axios，则可以使用withCredentials选项。例如：

    axios.post(`${process.env.REACT_APP_BACKEND_API_URL}/items`, {
        title: this.state.title,
        description: this.state.description,
    }, {withCredentials:true})
    .then( (res) => {
        // ...
    });

• （浏览器）检查第三方 cookie 的配置

为了进行测试，您可能希望确保使用每个浏览器提供的默认配置。

例如，截至 2021 年，Chrome 会在隐身模式下（但不会在“正常”模式下）阻止第三方 cookie，因此您可能想要这样的内容：

• ...并处理浏览器限制...：

最后，请记住，每个浏览器对第三方 cookie 都有不同的政策，一般而言，这些限制预计在未来几年会增加。

例如，Chrome 有望在 2023 年的某个时候阻止第三方 cookie（来源）。

如果您的应用程序需要绕过这些限制，这里有一些选项：

• 在同一个域下实现后端和前端

• 在同域的子域下实现Backend & Frontend（例如example.com & api.example.com）

• 将您的后端 API 置于代理下（如果您使用的是 Netlify，则可以使用 _redirects 文件轻松设置代理）