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

Posted 2023-02-27

【中文标题】使用 fetch 进行基本身份验证（或任何身份验证）

【英文标题】：Basic authentication (or any authentication) with fetch

【发布时间】：2016-07-01 01:57:10

【问题描述】：

找不到任何关于此的文档，所以在我深入研究代码之前，有没有人知道在使用 'fetch' (https://github.com/github/fetch) 发出 REST 请求时如何使用基本身份验证。

刚试了下面这行，但是请求中没有设置header：

  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' Accept，就不是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));
    );

【问题讨论】：

“身份验证”到底是什么意思？你想做什么？

我正在使用 Spring Boot 来公开一个 REST api，它需要基本身份验证，因为我现在已经设置了它。基本上我想做一个“授权：基本 QWxhZGRpbjpPcGVuU2VzYW1l”......但在我自己发送标题之前，我只想检查该功能是否内置在 fetch api 中。

据我记忆，基本身份验证只是设置标题，所以它应该像在传递给函数的对象中添加一些一样简单。

【参考方案1】：

由于您使用的库看起来像是 Fetch API 的 polyfill，因此我将假设语法也应该执行。

我在 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)...

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

【参考方案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，例如这个请求应该是成功的：

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

【讨论】：

知道为什么 Fetch API 没有类似的功能吗？

【参考方案3】：

no-cors 模式可防止标题成为简单标题以外的任何内容。

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