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

Question

我想在我的 React 项目中通过 axios 从服务器获取一些数据。当我将 url 放在浏览器上并点击进入浏览器询问我的用户名和密码时，我可以看到 json 数据。但是我不知道如何在 get 方法中的 axios header 中设置密码和用户名。我在很多论坛和页面上搜索过，尤其是这个链接对我没有帮助: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")>

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

Answer 1

好的，我找到了解决方案。正如我在为我的问题写的评论中提到的，也有一个 cors 问题。而且我发现出现了 cors 问题，因为我无法正确授权。所以cors是我的问题的自然结果。无论如何..我想分享我的解决方案，我希望它能帮助其他人，因为我找不到一个明确的 react 和 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));
    }

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