通过授权反应远程请求

Question

I want to do a remote request using React JS. I try to do it as follows:

let username = 'some-username';
let password = 'some-password';
let url = 'some-url';
fetch(url', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic '+btoa(username + ":" + password),
    },
}).then(response => {
      debugger;
      return response.json();
}).then(json => {
      debugger;
});

I get an error:

If I do the same request with the same credentials with postman it works:

Any idea?

UPDATE

let user = 'some-user';
let password = 'some-password';
let url = 'some-url';

let req = new XMLHttpRequest();
let body = '';

if ('withCredentials' in req) {
    req.open('GET', url, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.setRequestHeader('Authorization', 'Basic '+ btoa(user + ":" + password));
    req.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    req.onreadystatechange = () => {
        debugger;
        if (req.readyState === 4) {
            ///////////////// it comes here but req.status is 0
            if (req.status >= 200 && req.status < 400) {
                debugger;
                // JSON.parse(req.responseText) etc.
            } else {
                // Handle error case
            }
        }
    };
    req.send(body);
}

This is what I see in network tab:

Answer 1

You are having CORS problems. This is why it's working with Postman, it skips that check (OPTIONS call to the same request instead the GET one) and your React App (or any Javascript Ajax call ) fails, because your browser is checking it before launch the request..

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

This post shows how to deal with CORS https://www.eriwen.com/javascript/how-to-cors/