AWS Elastic beantalk和S3静态Web中的CORS策略

Question

我使用nodejs作为后端并将其托管在AWS中。我在节点项目中进行了此配置：

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  );
  res.setHeader(
    "Access-Control-Allow-Credentials",
    "true"
  );
  next();
});

托管在S3存储桶中的前端是使用离子角创建的。这是它在拦截器中的配置：

  req = req.clone({
     setHeaders : {
         Authorization: "Bearer " + userToken,
         'Content-Type': `application/json; charset=utf-8`
         }
  });

在S3存储桶（托管前端）中，我将此配置添加到CORS配置中：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

当我在本地运行应用程序并通过代理将其连接到后端时，它可以正常工作。但是，当我上传它并尝试连接到后端时，出现错误：

“对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。”

我的配置中还有什么以及如何解决？

Answer 1

对于本地环境，您需要在Chrome浏览器中使用this插件。安装后，您需要启用它，然后它将可以正常工作。