S3 被 CORS 策略阻止

S3 blocked by CORS policy

我已经在 S3 上部署了一个 React 应用程序(前端),并通过 AWS 上的 Elastic Beanstalk 部署了一个 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.

有人知道这里的问题是什么吗?

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

基本实现只包括:

Access-Control-Allow-Origin: *

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

Access-Control-Allow-Origin: http://ExampleHelloWorld.com/

这将只允许特定站点访问它,并且被授权的人可以根据 Origin 请求动态生成该站点 header 以允许多个(但不是所有)站点访问它。

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

更新的答案:(如果从 API 禁用 CORS)

当浏览器收到non-simpleHTTP请求时,CORS协议要求浏览器向服务器发送preflight请求并等待批准(或请求在发送实际请求之前从服务器获取凭据)。预检请求对您 API 显示为

的 HTTP 请求

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

  • (这将是 OPTIONS(而不是 GET、POST 或您正在尝试的任何内容 发送)
  • 用正确的方式回应它 Access-Control-Allow-Origin header 但是 还有 Access-Control-Allow-Methods
  • Access-Control-Allow-Headers 允许您的特定 HTTP 方法或 headers

如本文所述Doc