时间戳

首页 > 解决方案 > AWS Elastic beanstalk 和 S3 静态 Web 中的 CORS 策略

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

问题描述

我使用 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’标头。”

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

标签： angularamazon-web-servicesamazon-s3corsamazon-elastic-beanstalk

解决方案

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

推荐阅读