通過授權反應遠程請求

Question

我想使用React JS進行遠程請求。 我嘗試這樣做，如下所示：

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;
});

我收到一個錯誤：

如果我使用郵遞員以相同的憑證執行相同的請求，則它的工作原理是：

任何想法？

更新

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);
}

這是我在“網絡”標簽中看到的內容：

Answer 1

您遇到CORS問題。 這就是為什么它與Postman一起工​​作的原因，它跳過了該檢查（對同一請求的OPTIONS調用而不是GET一個請求），並且您的React App（或任何Javascript Ajax調用）失敗了，因為您的瀏覽器在啟動請求之前對其進行了檢查。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

這篇文章顯示了如何處理CORS https://www.eriwen.com/javascript/how-to-cors/