对具有 htpasswd 的 url 的 Axios GET 请求答案

【问题标题】：Axios GET request to url that has a htpasswd对具有 htpasswd 的 url 的 Axios GET 请求
【发布时间】：2020-12-02 17:49:55
【问题描述】：

我正在使用 Axios 向具有 htpasswrd 的 URL 发出 GET 请求。发出请求时，我在 DevTools 中收到了 CORS 策略错误，我认为这是由于 GET 请求未通过 htpasswrd。我认为将 htaccess 用户名和密码传递给端点的正确方法是使用 'auth' 配置选项，如下所示：

axios.get('https://example.com/api', {
    auth: {
        username: 'htusername',
        password: 'htpassword'
    }
}).then(response =>
{
    console.log(response.data);
});

但这不起作用。有谁知道如何解决这个问题？

【问题讨论】：

CORS 相关的错误消息究竟说了什么？
我得到：从源 'localhost:3006' 访问 XMLHttpRequest 在 'example.com/api' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-请求的资源上存在 Control-Allow-Origin' 标头。
这很不寻常。我希望那里的 OPTIONS 请求会因 403 错误而失败，因为您在预检时需要凭据或会通过。在没有Access-Control-Allow-Origin 的情况下返回 200 OK 是相当奇怪的。您确实需要对 HTTP 请求进行一些调试（使用浏览器开发人员工具中的网络选项卡）以及生成它们的任何服务器端代码。

标签： javascript axios httprequest

【解决方案1】：

全部排序 - 我必须将 htaccess 用户名和密码（URL 编码）传递到 URL 中，然后也将“withCredentials”选项设置为 true。这是一个例子：

axios.get(
    'https://urlencodedusername:password@thedomain.com/api',
    {
        withCredentials: true
    }
).then(response=>
{
    console.log(response);
});

【讨论】：

【解决方案2】：

尝试像这样访问您的链接：

axios.get(`https://${username}:${password}@example.com/api`)

【讨论】：

如果 OP 遵循的 axios 文档中的说明不起作用，为什么这应该起作用？
那么发送一个带有基本 Base64 编码字符串的授权 Cookie 怎么样？无论如何，他试图到达的终点似乎不允许他的起源
他们将如何发送授权 Cookie？ JS 禁止在请求上手动设置 Cookie 头。
哦是吗？从来没有在任何地方看到过
developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name