Fetch endpoint with basic auth gives 401

Question

I'm trying to call an endpoint with basic auth. I made a REACT application that needs to make api calls.

This is my code:

const base64 = require('base-64');
const login = base64.encode("username:password");

const fetchTemplates = async () => {
 console.log(login); // shows: dXNlcm5hbWU6cGFzc3dvcmQ=
 const response = await fetch("http://localhost:8080/students/chat/templates", {
  mode: "no-cors",
  headers: new Headers({"Authorization": `Basic ${login}`})
 });
 const data = await response.json();
 if (response.status > 400) {
  console.log(data.errors);
  throw new Error(data.errors);
 }
 console.log(data);
 return data;
}

export { fetchTemplates }

I'm not sure what i'm doing wrong here. Accessing the endpoint from browser works fine with the same credentials i use in my code. Normally i should be able to see the Authorization in the request header in the console. But there is nothing.

Any help is welcome.

Thanks in advance.

Check the logs on your server, or add log statements around that request listener if they don't exist already. — IronFlare, Aug 22 '19 at 19:03
This answer might be useful to you: https://stackoverflow.com/a/45640164/2444210 — IceMetalPunk, Aug 22 '19 at 19:07

score 3 · Answer 1 · answered Aug 22 '19 at 19:08

3

Long story short: no-cors mode restricts the kinds of headers that you can send. Authorization is not one of those headers. So you have to remove no-cors mode in order to use the Authorization header.

answered Aug 22 '19 at 19:08

IceMetalPunk

5,476
3
19
26

Fetch endpoint with basic auth gives 401

1 Answers1