magento / magento/magento-cloud-docker
CORS error when integrating with REST API
- Dominant language
- PHP
- Stars
- 277
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
### Preconditions
1. Magento `2.4.2`
2. NGINX image: `magento/magento-cloud-docker-nginx:1.19-1.2.2`
### Steps to reproduce
1. Setup a sample React App.
2. Use Magento REST API ([integration/admin/token](https://magento.redoc.ly/2.4.2-admin/tag/integrationadmintoken)) for authentication.
3. When calling na API, I get the CORS error.
### Expected result
For the NGINX image I am able to define an environment variable:
```
ENV REST_API_ORIGINS localhost:3000|staging.cloud
```
and then in the `vhost.conf` we add required headers:
```
# PHP entry point for main application
location ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check)\.php$ {
set $cors_origin "";
if ($http_origin ~ '^https?://(!ORIGINS!)$') {
set $cors_origin $http_origin;
}
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $cors_origin always;
add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With,X-Cache-Hash' always;
### Tell client that this pre-flight info is valid for 20 days
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
add_header 'Access-Control-Allow-Origin' $cors_origin always;
...
}
```
### Actual result

Contributor guide
Research direction
Start by reproducing the call from the sample React app against the Magento REST API using the stated Magento and NGINX image versions. Then inspect the NGINX image's vhost.conf configuration and compare its response headers with the issue's example; done means the API request no longer fails with a CORS error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nginx, php, react
- Domain
- api, backend, infrastructure
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100