Question

142

Fetch GET Request with custom header?

rated 0 times [ 148] [ 6] / answers: 1 / hits: 28676 / 7 Years ago, fri, march 17, 2017, 12:00:00

I am trying to send a GET request to a API but when i add custom headers in the code somthing strange happens.
Somewhere the request method changes to OPTIONS when it reaches the web server.

But when i do the same without headers it will be a GET type.
When i use the application postman (API development tool) the request works fine!

request code:

    let token = this.generateClientToken(privateKey, message);



    let myheaders = {

      appID: appID,

      authorizationkey: token

    }



    fetch('http://localhost:8080/api/app/postman', {

      method: GET,

      // body: JSON.stringify(''),

      headers: myheaders

    }).then(function(response) {

      console.log(response.status);     //=> number 100–599

      console.log(response.statusText); //=> String

      console.log(response.headers);    //=> Headers

      console.log(response.url);        //=> String



      return response.text()

    }, function(error) {

      console.log(error.message); //=> String

    })

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

Server log ouput (with headers):

worker_1  | 172.18.0.4 -  17/Mar/2017:15:47:44 +0000 OPTIONS /index.php 403

web_1     | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] OPTIONS /api/app/postman HTTP/1.1 403 5 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0 -

Server log output (without headers):

worker_1  | 172.18.0.4 -  17/Mar/2017:16:01:49 +0000 GET /index.php 403

web_1     | 172.18.0.1 - - [17/Mar/2017:16:01:49 +0000] GET /api/app/postman HTTP/1.1 403 5 http://localhost:3000/ Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0 -

Added the NPM modules for fetch support in extra browsers:

https://github.com/github/fetch#obtaining-the-response-url

https://github.com/taylorhakes/promise-polyfill

What am i missing here? It all looks correct to me.

I am using firefox development edition to test the Reactjs app by running it with NPM start

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emanir

Add To Favorites

Follow

Total Points: 151

Total Questions: 90

Total Answers: 105

Location: Suriname

Member since Sun, Jun 13, 2021

3 Years ago

answered 7 Years ago jarod · Accepted Answer

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

});