Fetch is not sending custom headers

Question

I'm trying to send a custom header within a fetch call, but it seems that the headers aren't being sent for some reason. I found some questions that seemed to indicate that 'cors' mode needs to be set as a fetch option, but I tried that and it hasn't made a difference.

In the console I'm getting this error:

Fetch API cannot load http://localhost:8000/GroupRoutePermission. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

However if I remove the x-api-key header from my fetch request, I don't get any CORS console error and get a JSON response just fine -- my JSON with error that says api key is not set (as expected).

I've also hit my endpoint with Postman with x-api-key set, and it works fine. Strangely enough I've ripped the below code out of a previous project of mine, and in that project the custom header gets sent just fine (even without cors mode), so I'm at a loss as to what else to try.

let apiKey = ""
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey
else 
    window.location = "/login"

console.log(apiKey)

fetch(url,{
    credentials: 'include',
    mode: 'cors',
    headers: new Headers({
        'Content-Type': 'text/plain',
        'x-api-key': localStorage.apiKey
    })
})

Chrome Network tab Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,fr-CA;q=0.6,fr;q=0.4,en-CA;q=0.2
Access-Control-Request-Headers:x-api-key
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:8082
Referer:http://localhost:8082/lists/ResearchTrial
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36

Response Headers with X-Api-Key sent:

HTTP/1.1 200 OK
Host: localhost:8000
Connection: close
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1
Allow: GET,HEAD
Cache-Control: no-cache
Content-Type: text/html; charset=UTF-8
Date: Tue, 12 Sep 2017 19:30:58 GMT

Response Headers if I remove X-Api-Key in request:

HTTP/1.1 200 OK
Host: localhost:8000
Connection: close
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1
Access-Control-Allow-Origin: http://localhost:8082
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-  Encoding, X-Api-Key
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Cache-Control: no-cache
Content-Type: application/json
Date: Tue, 12 Sep 2017 19:28:29 GMT

Please help!

Duplicate indeed! Thank you for linking to that question/answer! — user3246127, Sep 12 '17 at 19:43

score 0 · Answer 1 · answered Sep 12 '17 at 18:55

0

I've ripped the below code out of a previous project of mine, and in that project the custom header gets sent just fine (even without cors mode), so I'm at a loss as to what else to try.

Was that project also making cross-domain requests?

My guess is that the API will send cors headers when auth fails, but will not send the headers when auth succeeds. This doesn't affect Postman, which doesn't have to worry about cors.

You should be able to confirm this in Postman by sending an authenticated request and checking the response headers.

answered Sep 12 '17 at 18:55

Sidney

4,495
2
18
30

Yes that project was cross-domain as well. > My guess is that the API will send cors headers when auth fails, but will not send the headers when auth succeeds. Good thought, however I'm using Laravel on the back-end, and I have separate middleware for Cors, and Api key auth, and Cors is the very first one to run once the request is received. – user3246127 Sep 12 '17 at 19:05
I tried Postman again, running requests both with api key included and not included, and the responses are as intended. – user3246127 Sep 12 '17 at 19:10
The headers of the response are identical regardless of the auth? Is it the same in Chrome (or any browser)? – Sidney Sep 12 '17 at 19:12
I've edited by question to show the response headers with/without the custom header sent. – user3246127 Sep 12 '17 at 19:32
I think your original hunch may be right... I think my Cors middleware isn't running when the api key is included... why is still tbd. – user3246127 Sep 12 '17 at 19:38

Fetch is not sending custom headers

1 Answers1