Fetch: Authorization: 'Bearer XXX' is not sent

[fczuardi]

I don't know if I am making this correct, my code looks like this:

var token = '123456789';
var requestHeaders = {
    'Authorization': 'Bearer ' + token
};
fetch(url, {
    method: 'get',
    headers: requestHeaders
})
.then(function(response) {
    console.log('hooray');
})
.catch(function(e){
    console.log('Error:', e);
});

But when inspecting the request on Firefox or Chrome Develeoper Tools, the Authorization header doesn't look like it was sent.

[fczuardi]

nevermind, I didnt noticed that when it is cross dommain it first make an options for then make the get, closing as invalid

[iLeonelPerea]

@fczuardi how did you solve this?

[engulsax]

I ran in to the same problem and found a solution, so if anyone in the future visits this page, then this is how I solved it:

Preconditions

I was trying to send the request to my own rest API which was implemented with node JS and express.
If you have a different setup, then this might not work for you.

What is happening?

The application first sends an OPTIONS request when making the request due to the resource being hosted on another domain. If the API is not properly set up to handle OPTIONS request then the intended request(GET, POST, etc) will not be processed as the API will respond to the OPTIONS request instead.

source:
https://medium.com/@dvelasquez/handle-an-options-request-with-cors-in-node-js-f3f81c5a7494

How did I solve it?

By using a cors npm package

Then simply including cors() as a parameter when handling the request

const cors = require('cors')

app.get('/movies', cors(), function (request, response, next) {
...
}