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

Question

我想通过反应项目中的axios从服务器获取一些数据.当我把网址放在浏览器上并点击进入浏览器时问我用户名和密码,之后,我可以看到json数据.但我不知道如何在get方法中设置axios头中的密码和用户名.我在很多论坛和网页上搜索过它,特别是这个链接对我没有帮助:发送axios获取带有授权标题的请求.所以最后我尝试了(在此之前很多事情,但我更困惑):

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文档提到了这些话:

如果没有标题或数据不正确 - 服务器的答案将包含HTTP状态401 Unauthorized和消息:

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

要成功验证,只需在API的每个请求标头中添加:

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

奇怪的是,当我使用邮递员时,响应会在身体部分下方向我发送"401未经授权"的回复.但我在浏览器的控制台中看不到任何401错误.

Answer 1

好的,我找到了解决方案.正如我在为我的问题所写的评论中提到的那样,也存在一个问题.我发现出现了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));
    }

并且不要忘记在单引号中获得授权并且不要像我一样奋斗数小时:)