Fetch GET Request with custom headers ReactJS

The accepted answer game me the solution, i am not using a nodeJS backend but plain Nginx with php-fpm.

But the answer explains how a request with custom header wil always first do a OPTIONS request to verify the acceptance of the set header names, so i had to change the response in the webserver to give a 204 code back with te right headers included. without it would hit my PHP code where authentication would fail and result in a 403 code because of the absence of the headers with the content and request method used.

This is what i added to the Nginx host to make it work:

location ~ \.php$ {
             add_header 'Access-Control-Allow-Origin' "*";
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
             add_header 'Access-Control-Allow-Headers' 'appID,authorizationkey';

             if ($request_method = 'OPTIONS') {
                return 204;
             }
}

I know that its far from perfect but for now it made it work. and again thanks for pointing me into the right direction.

You probably want to install the cors npm package https://www.npmjs.com/package/cors on the server where you have your http://localhost:8080/api/app Node app running.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has details about what’s happening here: Your appID and authorizationkey request headers are triggering your browser to send a CORS preflight OPTIONS request before sending the GET.

To handle that OPTIONS request, you can install the cors npm package and follow the instructions at https://www.npmjs.com/package/cors#enabling-cors-pre-flight to configure it:

var express = require('express')
  , cors = require('cors')
  , app = express();
app.options('*', cors()); // include before other routes
app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});