S3 被 CORS 策略阻止

Question

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

Access to XMLHttpRequest at 'http://platform-name-api.eu-central-1.elasticbeanstalk.com/api/v1/something' from origin 'http://platform-name-web.s3-website.eu-central-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有人知道这里有什么问题吗？ 我将不胜感激任何帮助

谢谢

Answer 1

错误消息中提到的Access-Control-Allow-Origin HTTP 响应 header 是 CORS 标准的一部分，该标准允许被授予人通过浏览器站点显式授予访问数据的权限。

一个基本的实现将只包括：

访问控制允许来源：*

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

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

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

要解决此问题，必须为特定存储桶启用 CORS 配置，请参阅此文档

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

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

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

• （这将是 OPTIONS（而不是 GET、POST 或您尝试发送的任何内容）
• 使用正确的 Access-Control-Allow-Origin header 以及 Access-Control-Allow-Methods 来响应它
• Access-Control-Allow-Headers 以允许您的特定 HTTP 方法或标头

如本文档所述