React 生产和 Cookie 问题

Question

我开发了一个 react 应用和一个 express API。在 localhost 中一切正常。

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

当我在开发环境中使用 react 应用程序的 API 时，它可以正常工作。它从 API 获取 cookie，将它们发送到 API 进行授权...

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

我在 index.js / react app 中将我的 API 的 IP 设置为基本 url 和凭据为真

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，并在 Netlify 上部署我的 react-redux 客户端进行检查。 （注意：在没有充分测试的情况下，切勿将其投入生产。）

使用“编辑此 cookie”扩展程序（也可以使用浏览器开发工具查看），我发现我的 cookie 是在 API 服务器域中创建的，而且 API 服务器不会将 cookie 发送给我的客户端。经过大量研究，我没有找到具体的解决方案来解释为什么这个问题仍然存在。

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

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

我的见解，

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

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

1. 如果您正在制作 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);
   

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

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

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

• https://github.com/JaganKaartik/Shrynk.js
• https://github.com/JaganKaartik/Foodle

4. https://stackoverflow.com/a/53566745/12408623

参考文献

1. https://create-react-app.dev/docs/deployment/
2. https://stackoverflow.com/a/53566745/12408623