Question

找不到任何关于此的文档，因此在深入挖掘代码之前，任何人都知道在使用“fetch”（https://github.com/github/fetch）发出REST请求时如何使用基本身份验证。

刚刚尝试了以下行，但未在请求中设置标头：

  fetch('http://localhost:8080/timeEntry', {
      mode: 'no-cors',
      headers: { 'Authorization': 'Basic YW5kcmVhczpzZWxlbndhbGw=' }
    })
    .then(checkStatus)
    .then(parseJSON)
    .then(function(activities) {
      console.log('request succeeded with JSON response', data);
      dispatch(activitiesFetched(activities, null));
    }).catch(function(error) {
      console.log('request failed', error);
      dispatch(activitiesFetched(null, error));
    });

用户名和密码是我自己的名字和姓氏，使用curl。

如果我设置{ 'Accept' : 'application/test' }接受设置，则不是Authorization ...奇怪。

为了能够继续，我添加了credentials: 'include'，这使浏览器提示输入用于与REST后端进行通信的用户名和密码。仅供测试，将进一步使用OAuth。

  fetch('http://localhost:8080/timeEntry', {
      mode: 'no-cors',
      credentials: 'include'
    })
    .then(checkStatus)
    .then(parseJSON)
    .then(function(activities) {
      console.log('request succeeded with JSON response', data);
      dispatch(activitiesFetched(activities, null));
    }).catch(function(error) {
      console.log('request failed', error);
      dispatch(activitiesFetched(null, error));
    });

Answer 1

由于您使用的库看起来像是Fetch API的填充，我将假设语法也应该继续使用。

我在Mozilla页面上找到的示例表明，fetch方法签名为fetch('API_ENDPOINT', OBJECT)，其中object如下：

myHeaders = new Headers({
  "Authorization": "Basic YW5kcmVhczpzZWxlbndhbGw="
});

var obj = {  
  method: 'GET',
  headers: myHeaders
})

所以方法变为：

fetch('http://localhost:8080/timeEntry', obj)
    .then(checkStatus)
    .then(parseJSON)...

我没有测试过这段代码，但它似乎与我能找到的一致。希望这能指出你正确的方向。

Answer 2

请注意，如果您将fetch与Authorization标头一起使用，则不会建立会话。您将为每个请求手动添加该标头。导航到安全路径也是不可能的。

因此，要执行此操作，您应该使用XMLHttpRequest进行预身份验证。您可以这样操作：

                        var authUrl = location.origin + '/secured-path/';
                        var http = new XMLHttpRequest();                        
                        http.open("get", authUrl, false, login, pass);
                        http.send("");
                        if (http.status == 200) {
                            //location.href = authUrl;
                        } else {
                            alert("⚠️ Authentication failed.");
                        }

请注意，上述操作是同步的，因此您无需在此处进行回调。

因此，执行此操作后，您可以使用不带标题的抓取功能，例如此请求应该成功：

                        fetch(authUrl, { 
                            method: 'get',
                        }).then(function(response) {
                            console.log(response);
                        });

Answer 3

no-cors模式可以防止标头不是简单标头。

“授权”标头不适合简单的标头。在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

使用fetch进行基本身份验证（或任何身份验证）

3 个答案: