magento / magento/magento-cloud-docker

CORS error when integrating with REST API

Open
#324 1 comment 0 reactions 0 assignees View on GitHub
accepted Priority: P2 Progress: ready for grooming Release Line: 1.2
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
Screenshot 2021-06-01 at 21 59 12

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.