Geek Answers Handbook

Setting authorization in the source browser

I encounter a problem when I cannot configure the headers for the select query, and I think I am missing something

var init = { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer myKey' } }; return fetch(url, init).then(function(response){...

When the request is checked on the network tab, I don’t see the headers set, but instead they see

 Access-Control-Request-Headers:accept, authorization, content-type

when i expect to see

 Authorization: Bearer myKey Content-Type: application/json Accept: application/json

I also tried using the native Headers () with zero difference.

Did I miss something?

+6
source share
1 answer

I had the same problem and spent a little time investigating this evening. The problem is resource sharing / CORS . With Fetch, this is the default, and it makes things much more complex.

If both sources and destinations do not match, this is a cross-domain request, and they are only supported if the request is for a destination that supports CORS (Cross-Origin resource sharing). If this is not so, then it will not pass. You will usually see an error, for example No 'Access-Control-Allow-Origin' header is present on the requested resource

This is why you cannot create authorization headers on sites other than CORS; see No. 5 and main headings

PROHIBITED DENTAL NAMES:

And unfortunately, before you try the XMLHttpRequest route, the same: The same with XMLHttpRequest:

Finally, your choice to move forward: 1. JSONP 2. Write a proxy server that is not in the browser. 3. Place CORS on the target server

This article sums up

+8
source

More articles:


All Articles