Question

非常简单的问题，但我无法找到任何关于此的内容。

我尝试使用原始身份验证标头发送获取请求。我的应用程序正在使用http基本身份验证所有路由工作正常。与我的客户js我尝试创建/api/thing的请求，该请求需要与原始页面请求相同的http基本凭据。

如何通过请求传递原始凭据？

fetch("http://localhost:33507/api/thing")
.then(function(response) {
    return response.text()
})
.then(function(responseText) {
    console.log(responseText);
});

编辑：我知道我可以像这样传递标题：

fetch("http://localhost:33507/ssh", {headers: {"Authorization": "basic u:p"}})

但这不是问题，问题是获取用户名和密码。我无法要求用户在每次请求时填写他们。当然有一种方法可以在不看它们的情况下传递它们吗？

edit2：我的流程是这样的：

1个用户请求页面 - 服务器请求http基本凭据。

2个用户发送凭据 - 服务器回复页面。

3个用户按下按钮发送获取请求 - 服务器回复资源。

这里的问题是，我无法在执行获取请求时找到传递这些凭据的方法

Answer 1

我认为您应该能够在不在JavaScript代码中明确添加凭据的情况下执行此操作。如果您的客户端已经在同一个域中进行了身份验证，那么将credentials: 'include'添加到您的获取请求options对象就足够了：

let url = "some url";
let options = { "credentials": "include" };
fetch(url, options).then( ... ).catch( ... );

Answer 2

我相信你所寻找的是一种不必每次都设置标题的方法。

（我假设您正在为浏览器编程）

一个选项是将用户名和密码存储在本地存储中，然后将fetch包装在您自己的方法中。

/**
 * Called after user enters credentials, saves to credentials
 * to localStorage for use in subsequent calls.
 * @param {string} userName
 * @param {string} password
 */
saveCredentials(userName, password) {
  localStorage.setItem('credentials', 'basic '+userName+':'+password);
}


/**
 * Site wide custom fetch wrapper. Appends default headers, calls the
 * standard fetch method, and returns a fetch promise.
 * @param {string} url
 * @param {object} options
 * @returns {Promise}
 */
myFetch(url, options) {
  var options = options || {};
  var options.headers = options.headers || {};
  options.headers['Authorization'] = localStorage.getItem('credentials');
  return fetch(url, options);
}

另一个选择是使用这样的东西：

https://github.com/moll/js-fetch-defaults

这允许您为fetch设置一次默认标头，然后所有后续提取将使用相同的标头。

fetch - 传递原始身份验证标头

2 个答案: