在服务器上部署后，身份验证标头未到达 React 和 NodeJS 应用程序中的服务器

Question

我有一个应用程序，前端内置 React，后端内置 NodeJS。当我使用本地主机在计算机上本地运行时，我的应用程序工作正常。但是，当我在 render.com 上部署应用程序时，我遇到了身份验证标头的问题。

我成功登录应用程序，但之后要访问 API，我必须使用 JWT。我在登录后收到 JWT 并将其包含在对后续 API 的请求中，但我的服务器没有收到身份验证标头。以下快照显示了问题：

1. 从 Chrome 发送的请求包含授权标头。

但是，在服务器端收到以下标头：

2. 从服务器收到的响应显示请求中没有标头。

我已附上 chrome 开发人员选项的两个屏幕截图。另外，您还可以在下面看到服务器上收到的标头的控制台快照：

使用令牌达到 verifyToken：{“host”：“nearusnewadminserver.onrender.com”，“user-agent”：“Mozilla/5.0（Macintosh；Intel Mac OS X 10_15_7）AppleWebKit/537.36（KHTML，如 Gecko）Chrome/128.0 .0.0 Safari/537.36","接受":"/","接受编码":"gzip, br","接受语言":"en-US,en;q=0.9,ur-PK; q=0.8，ur；q=0.7，fa-IR；q=0.6，fa；q=0.5，ar-AE；q=0.4，ar；q=0.3"，"访问控制请求标头"："授权","访问控制请求方法":"GET","cdn-loop":"cloudflare; 循环=1","cf-connecting-ip":"185.67.127.180"," cf-ew-via":"15","cf-ipcountry":"GB","cf-ray":"8be10f90528977a5-LHR","cf-visitor":"{"scheme":"https"}" ,"cf-worker":"onrender.com","origin":"http://localhost:8000","priority":"u=1, i","referer":"http://localhost: 8000/","render-proxy-ttl":"4","rndr-id":"d77239b2-95cc-481b","sec-fetch-dest":"空","sec-fetch-mode": "cors","sec-fetch-site":"跨站点","true-client-ip":"185.67.127.180","x-forwarded-for":"185.67.127.180, 10.222.42.14, 10.223 .245.2","x-forwarded-proto":"https","x-request-start":"1725485217438628"}

请注意，我必须将以下中间件添加到我的后端，因为我的前端主机和后端主机在 render.com 上不同：（在下面的快照中，我使用了我的开发服务器主机 url，因为我正在使用它进行测试以确保标头已包含在内。

function accessControl(req,res,next){
    console.log(`Reached access control allow part`);
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    next();
}

module.exports = {
    accessControl
}

我搜索了很多论坛，但没有找到解决方案。还值得注意的是，当我使用 Postman 发送相同的请求时，它工作正常。

Answer 1

由于选项请求失败，浏览器控制台中似乎出现 CORS 错误。 提供您如何使用此 accessControl 中间件的代码。 为了让它工作，它应该看起来像这样：

app.get('/countries', accessControl, (req, res) => {
  return res.json(['US']);
});

或者像这样：

app.use(accessControl)

app.get('/countries', (req, res) => {
  return res.json(['US']);
});

如果您使用的是express，也可以尝试使用此软件包来解决此问题https://www.npmjs.com/package/cors 示例：

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())
 
app.get('/countries', function (req, res, next) {
  return res.json(['US']);
})
 
app.listen(80, function () {
  console.log('server listening')
})