S3 blocked by CORS policy

user_4805754 0
Viewed 2524

I have deployed a React App (Frontend) on S3 and a Laravel PHP API (Backend) via Elastic Beanstalk on AWS. My react app has API calls on my backend but unfortunatelly they are blocked by 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.

Anyone knows whats the issue here?

cors amazon-web-services amazon-ebs amazon-s3
1 Answers

The Access-Control-Allow-Origin HTTP response header referred to in the error message is part of the CORS standard which allows granted person to explicitly grant permission to yours site to access the data via browser.

A basic implementation would just include:

Access-Control-Allow-Origin: *

The response headers to permit any website to read the data.

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

This would allow only a specific site to access it, and granted person can dynamically generate that based on the Origin request header to permit multiple, but not all, sites to access it.

To solve this, CORS configuration must be enabled for the specific bucket refer this Doc

Updated Answer: (If CORS is disabled from API)

When a browser receives a non-simple HTTP request, the CORS protocol requires the browser to send a preflight request to the server and wait for approval (or a request for credentials) from the server before sending the actual request. The preflight request appears to your API as an HTTP request that

You need to make sure that the server can listen for the preflight request

  • (which will be OPTIONS (and not GET, POST or whatever you were trying to send)
  • Respond to it with the right Access-Control-Allow-Origin header but also Access-Control-Allow-Methods
  • Access-Control-Allow-Headers to allow your specific HTTP methods or headers

as mentioned in this Doc

user_134945420
Related