CORS error when integrating with REST API

[tomaszmichalak]

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) 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

[shiftedreality]

Thank you for submitting this issue,

Internal ticket https://jira.corp.magento.com/browse/MCLOUD-7990 was created for processing