S3 被 CORS 策略阻止

Posted 2023-02-27

【中文标题】S3 被 CORS 策略阻止

【英文标题】：S3 blocked by CORS policy

【发布时间】：2021-04-16 20:13:46

【问题描述】：

我在 S3 上部署了一个 React 应用程序（前端），并通过 AWS 上的 Elastic Beanstalk 部署了一个 Laravel php API（后端）。 我的 React 应用在我的后端有 API 调用，但不幸的是它们被 CORS 阻止了。

从源“http://platform-name-web.s3-website”访问“http://platform-name-api.eu-central-1.elasticbeanstalk.com/api/v1/something”上的 XMLHttpRequest .eu-central-1.amazonaws.com' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

有人知道这里有什么问题吗？

【参考方案1】：

错误消息中提到的 Access-Control-Allow-Origin HTTP 响应标头是 CORS 标准的一部分，该标准允许被授予者明确授予您的站点通过浏览器访问数据的权限.

一个基本的实现只包括：

访问控制允许来源：*

允许任何网站读取数据的响应标头。

访问控制允许来源：http://ExampleHelloWorld.com/

这将只允许特定站点访问它，并且被授予的人可以根据 Origin 请求标头动态生成它，以允许多个（但不是所有）站点访问它。

要解决这个问题，必须为特定存储桶启用 CORS 配置，请参阅 Doc

更新答案：（如果 API 禁用了 CORS）

当浏览器收到非简单的 HTTP 请求时，CORS 协议要求浏览器向服务器发送 preflight 请求并等待服务器的批准（或凭据请求）发送实际请求。预检请求在您的 API 中显示为 HTTP 请求，

您需要确保服务器可以侦听预检请求

（这将是 OPTIONS（而不是 GET、POST 或您尝试的任何内容） 发送） 使用正确的 Access-Control-Allow-Origin 标头响应它，但 还有访问控制允许方法 Access-Control-Allow-Headers 以允许您的特定 HTTP 方法或 标题

正如Doc中提到的那样

【讨论】：

我不太确定这里是存储桶配置，但它看起来像 API 配置？它似乎没有在来自“platform-name-api.eu-central-1.elasticbeanstalk.com/api/v1/…”的 API 响应中发送正确的 CORS 标头。

是的，因为错误显示“来自预检请求的响应”并相应地更新了我的答案。谢谢你提到它。