如何在axios get方法中设置用户名和密码header

Question

我想在我的 React 项目中通过 axios 从服务器获取一些数据。当我在浏览器上输入 url 并点击回车时，浏览器会询问我用户名和密码，之后，我可以看到 json 数据。但是我不知道如何在 axios header 的 get 方法中设置密码和用户名。我在很多论坛和页面上搜索过它，尤其是这个 link 对我没有帮助： Sending axios get request with authorization header 。所以最后我尝试了（在此之前有很多事情，但我更困惑）：

componentDidMount() {
   axios.get('http://my_url/api/stb', {auth: {
    username: 'usrnm',
    password: 'pswrd'
}})
   .then(function(response) {
       console.log(response.data);
       console.log(response.headers['Authorization']);
   }).catch(err => console.log(err));
}

而且我什么也得不到。我在控制台中收到此错误：

Error: Network Error
Stack trace:
createError@http://localhost:3000/static/js/bundle.js:2195:15
handleError@http://localhost:3000/static/js/bundle.js:1724:14

实际上，api 文档提到了这些话：

If there is no header or not correct data - server's answer will contain HTTP status 401 Unauthorized and message:

< {"status":"ERROR","results":"","error":"401 Unauthorized request"}

For successful authentification is sufficient to add in every request header to the API:

Authorization: Basic <base64encode("login":"password")>

奇怪的是，当我使用邮递员时，响应在 body 部分下方向我发送了“401 未授权”响应。但是我在浏览器的控制台中看不到任何 401 错误。

Answer 1

好的，我找到了解决方案。正如我在为我的问题写的评论中提到的，也有一个 cors 问题。而且我发现出现了 cors 问题，因为我无法正确授权。所以cors是我的问题的自然结果。无论如何..我想分享我的解决方案，我希望它能帮助其他人，因为我找不到一个明确的反应和 axios 授权示例。

我通过 npm 安装了 base-64 库并且：

componentDidMount() {
        const tok = 'my_username:my_password';
        const hash = Base64.encode(tok);
        const Basic = 'Basic ' + hash;
       axios.get('http://my_url/api/stb', {headers : { 'Authorization' : Basic }})
       .then(function(response) {
           console.log(response.data);
           console.log(response.headers['Authorization']);
       }).catch(err => console.log(err));
    }

并且不要忘记在单引号中获得授权并且不要像我一样挣扎几个小时:)

如何在axios get方法中设置用户名和密码header

How to set username and password in axios get method header

javascript

reactjs

httprequest

axios

ajax-request