React 生产和 Cookie 问题

Question

我开发了一个 React 应用程序和一个 express API。在本地主机上一切正常。

我将我的 API 移动到 digitalocean droplet，它只是 IP 地址并且是 HTTP。

当我在开发环境中使用来自 React 应用程序的 API 时，它正在运行。它正在从 API 获取 cookie，将它们发送到 API 以进行授权...

但是，在我运行 npm run build 在我的生产反应应用程序上并在我的本地计算机上提供它之后，它停止向 API 和 API 发送 cookie停止发送 cookie 以响应应用程序。

我将 API 的 IP 设置为基础 url 并在 index.js / react app

中将凭证设置为 true

axios.defaults.baseURL = "http://xxx.xxx.xxx.xxx"
axios.defaults.withCredentials = true

API API

中的 cors 设置

app.use(cors({origin: true, credentials: true}))

axios登录请求（登录成功后没有cookie显示）

await axios.post('/api/main/login', {form: form}).then(async resp => {

        if(resp.data == 'VALIDERR' || resp.data == 'CHECKERR') {

          setErrs({...errs, serverErrs: [resp.data]})
          setLoading(false)

        } else {

          setLoading(false)
          checkLogin()
          window.location.href = "/admin"

        }
   })

API的res.cookie登录请求

res.cookie('auth', {token: token, name: user.name}).send('OK')

我希望有人知道构建 React 应用程序后出了什么问题。感谢您的帮助

Answer 1

几个月前我遇到过类似的问题。这是我解决它的方法。

在运行 npm build 并在本地提供生产版本后，您一定已经注意到它停止接受 cookie。

在构建我的应用程序时，我在本地也遇到了这个确切的问题。当我在做一个业余项目时，我决定将我的 express-API-server 部署到 Heroku，并将我的 react-redux 客户端部署到 Netlify 上进行检查。（注意：切勿在未进行充分测试的情况下投入生产。）

使用“编辑此 cookie”扩展（也可以使用浏览器开发工具查看），我发现我的 cookie 在 API 服务器域创建，API 服务器也没有将 cookie 发送给我的客户。经过大量研究，我没有找到解决此问题持续存在原因的具体解决方案。

一般来说，我看到使用 credentials: true 似乎在大多数情况下都可以解决问题（我没有看到有关 deployment/production 环境的信息）但它似乎对我不起作用，但是，我有一些见解。

我决定使用不同的方法来解决这个问题。 (JWT)

我的见解，

如果您从另一个域的客户端访问，请检查您的 domain 和 sameSite cookie 选项。（在这里，我假设你想在其他地方部署你的客户端）

您必须设置 sameSite:false 才能在另一个域设置 cookie。

如果您正在制作 SPA，为什么不将客户端与快速服务器捆绑在一起？所以这解决了 CORS 和 cookie 域问题。

 const express = require('express');
 const path = require('path');
 const app = express();

 app.use(express.static(path.join(__dirname, 'build')));

 app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

 app.listen(9000);

使用基于令牌的会话 (JWT)

同意并非在所有情况下都理想，但对大多数情况都有帮助。

我已经构建了一些基于 MERN 的应用程序，大部分都已部署。参考那些以了解 JWT 在 MERN 中是如何实现的。

参考资料

https://create-react-app.dev/docs/deployment/

React 生产和 Cookie 问题

React Production and Cookie Problems

javascript

cookies

node.js

express

reactjs