Question

我已经通过 AWS 上的 Elastic Beanstalk 在 S3 上部署了一个 React 应用程序（前端）和一个 Laravel PHP API（后端）。我的 React 应用在后端有 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 响应标头是 CORS 标准的一部分，该标准允许被授予人明确授予您的站点通过浏览器访问数据的权限.

一个基本的实现只包括：

<块引用>

访问控制允许来源：*

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

<块引用>

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

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

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

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

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

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

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

如本Doc

中所述

S3 被 CORS 策略阻止

1 个答案: