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

Posted 2023-03-04

【中文标题】AWS Elastic beanstalk 和 S3 静态 Web 中的 CORS 策略

【英文标题】：CORS policy in AWS Elastic beanstalk and S3 static web

【发布时间】：2020-06-10 01:07:57

【问题描述】：

我使用 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 存储桶中的前端是使用 Ionic Angular 创建的。这是它在拦截器中的配置：

  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' 标头。”

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

【参考方案1】：

对于本地环境，需要使用chrome浏览器的this插件。安装后，您需要启用它，然后它会正常工作。

【讨论】：

感谢您的回答。但我不能要求所有用户为他们的浏览器安装这个插件。

这仅适用于本地环境。在实时站点上，您的代码可以正常工作。

对于本地只要我使用代理，我没有问题。我的问题是我的代码在实时站点上不起作用！

能否在 HttpHeaders() 中附加“Content-type”、“application/x-www-form-urlencoded”和“X-Requested-With”、“XMLHttpRequest”？

我做到了。但不幸的是没有解决问题：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。