Javascript 为什么我的react应用程序和express server之间的获取请求不起作用？

我正在尝试将我的react js前端（当前托管在localhost上/用于测试，但在同一react应用程序的s3 bucket实例上得到相同的错误）链接到by node js/express server（托管在AWS上的elastic beanstalk环境中）。我最近在我的react应用程序中向我的获取请求添加了标题，以通过cors错误。下面是我所做工作的一个例子：

validateUser = (event) => {
event.preventDefault();
fetch('https://myServerURL/signIn?username=' + this.state.validateUsername + '&password=' + this.state.validatePassword, 
  {
    method: 'GET',
    headers: new Headers({
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
    })
  }
)
.then((response) => response.json())
.then((response) => {
  console.log('testing' + response.userID)
  this.setState({test: response.userID})
})
  }

我的node/express服务器中还有以下cors配置代码（这是我在express服务器中的第一行代码）：

我现在得到一个不同的cors错误：

Access to fetch at 'https://myServerURL/signIn?username=****&password=****' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

此“飞行前请求不允许重定向”错误似乎比我上次的cors错误（这是因为我的react应用程序中缺少访问控制Allow Origin标头）要少见得多，我很难找到解决方案/文档。。我不知道该怎么做才能纠正这个错误。对于一点上下文，如果它很重要：

我在AWS Route53中创建了规则，将流量从我自己的自定义域名路由到elastic beanstalk url。我相信这对于利用我的SSL证书是必要的，它有助于https到http错误（从我的s3 bucket url到我的EB url进行通信）

我不认为所有这些路由和配置都会导致我的cors问题，但我不确定，所以我想将其作为上下文

我的标题中是否缺少react应用程序中的配置详细信息？或者我的express服务器中缺少了什么东西（我的印象是启用cors模块“解决”了cors的服务器端问题

再次澄清，这是我的错误：

Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

我一直在研究这个错误，直到我脸色发青，不知所措。导致此错误的原因是什么？如何修复？非常感谢你的帮助

---

更新

---

---

当我将获取url从我的域名（这是到我的EB url的https域路由）更改为EB环境的url时，应用程序工作正常。看来cors错误可能来自于我路由流量的方式？请帮忙

使用cors设置，尝试将前端标题移动到后端，如下所示：

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token")
  app.use(cors());
  next();
});

---

不要忘了从前端代码中删除这些头。

一个问题是您试图从客户端传递的头，例如，

访问控制允许源站

仅允许在服务器上设置。您是否能够解决此问题？这不起作用。它创建了一个不同的错误，我通过在我的react应用程序中包含该头信息来避免该错误：请求的资源上不存在“Access Control Allow Origin”头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token")
  app.use(cors());
  next();
});