带 fetch 的基本身份验证(或任何身份验证) [英] Basic authentication (or any authentication) with fetch

问题描述

找不到关于此的任何文档，所以在我深入挖掘代码之前，有没有人知道在使用fetch"(https://github.com/github/fetch).

Couldn't find any documentation on this, so before I dig deep in code does anyone out there know how to use basic authentication when making a REST request using 'fetch' (https://github.com/github/fetch).

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

Just tried the following line, but the header was not set in the request:

  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 就可以了.

The username and password is my own first and last name, using curl it works.

如果我把 { 'Accept' : 'application/test' } 设置为接受，只是没有 Authorization...奇怪.

If I put { 'Accept' : 'application/test' } Accept is set, just not Authorization... strange.

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

Just for me to able to continue I added credentials: 'include' which makes the browser to prompt for username and password which is used for communicationg with the REST backend. Just for testing, will use OAuth further on.

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

推荐答案

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

Note that if you use fetch with Authorization header you will NOT establish a session. You will have manually add that header for every request. Navigating to secured path would also not be possible.

所以要使这项工作您应该使用 XMLHttpRequest 进行预身份验证.你可以这样做:

So to make this work You should pre-authenticate with XMLHttpRequest. You can do this like so:

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

请注意，上面是同步的，所以这里不需要回调.

Note that above is synchronous so you don't need a callback here.

因此，在执行此操作后，您可以使用不带标题的 fetch，例如这个请求应该是成功的:

So after doing this you can use fetch without headers e.g. this request should be successful:

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

这篇关于带 fetch 的基本身份验证(或任何身份验证)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！