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?
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
as mentioned in this Doc