When trying to execute a request to the server - the header is not sent.

<!DOCTYPE html> <head> <title>Devpage</title> </head> <body> </body> <script type="text/javascript"> const myHeaders = new Headers(); myHeaders.set('Authorization', 'Basic dXNlcjpwd2Q='); // user:pwd fetch( 'http://tihonv.pythonanywhere.com/', { method: 'POST', mode: 'no-cors', headers: myHeaders, }).then((resp) => console.log(resp)); </script>

When sending a request - headers are not sent .

You can check by sending a request here.

  • Firefox 51.0.1 Chrome 56.0.2924.87 NodeJS 7.6.0 - Tihon

2 answers 2

In fact, Authorization and no-cors are mutually exclusive. You yourself have forbidden to transfer logins, passwords, here and do not resent now;)

To transmit the same title, you must still put mode: "cors" .

In your case, if you do all this within the same site, this should be enough for the Autorization header Autorization be transmitted.

Below is a case where the site that sends the request, and the site that receives it - different sites. Cross domain queries are more complicated. (example.com is the site where fetch launched, yourserver.com is the site where the request is sent)

When sending such a cross-domain request, the browser will first send an OPTIONS request to the server:

 OPTIONS / HTTP/1.1 Host: yourserver.com Origin: http://example.com Access-Control-Request-Method: POST Access-Control-Request-Headers: authorization

To this, your server must answer that it permits to transmit this whole thing, and it permits all this to the exact site that sends the request (Origin):

 HTTP/1.1 200 OK Access-Control-Allow-Headers: authorization Access-Control-Allow-Origin: http://example.com (альтернатива:) Access-Control-Allow-Origin: *

And only then the browser, when it receives permission to send from the server, will send a real POST request with this unfortunate Authorization :

 POST / HTTP/1.1 Host: yourserver.com Origin: http://example.com Authorization: Basic dXNlcjpwd2Q=

And when answering a POST request, yourserver.com still has to remember to indicate that it allows example.com to do this:

 HTTP/1.1 200 OK Access-Control-Allow-Origin: http://example.com (альтернатива:) Access-Control-Allow-Origin: *

If you miss any of this, your fetch will not work. These are the paranoid modern browsers

  • Added headers in server settings. Now stuck on the fact that the server when responding to OPTIONS sends 401. Where else can you look? I do not want to create a proxy so that everything is on the same domain. - Tihon
  • @Tihon repair the server so that it does not return 401, since this is the wrong behavior - andreymal
  • Alas, there is no code from a module that works with logic. So - proxy? - Tihon

Try this

 const req_url = 'http://localhost:5000/' let resp = fetch(req_url, { method: 'POST', mode: 'no-cors', headers: { 'Authorization' : 'Basic dXNlcjpwd2Q=', }, }).then((resp) => resp)
  • Does not work. Does not send a header. Proof - Tihon
  • @Tihon and in your version the title goes away? I use let headers = new Headers (); headers.append ('Authorization', 'Basic MTAxaW50ZXI6dGVzdDEwMQ =='); and everything is OK - xFloooo
  • Checked all three ways. Headlines do not go away. - Tihon
  • @Tihon isomorphic-fetch? - xFloooo
  • Most likely - yes, in any case, it is in the node_modules, did not make additional gestures and set the react-redux-starter-kit . How to check? - Tihon