Question

我想通过反应项目中的axios从服务器获取一些数据。当我把网址放在浏览器上并点击进入浏览器时问我用户名和密码，之后，我可以看到json数据。但我不知道如何在get方法中设置axios头中的密码和用户名。我在很多论坛和网页上搜索过它，尤其是这个链接对我没有帮助：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文档提到了这些词：

如果没有标题或数据不正确 - 服务器的回答会包含HTTP状态401未授权和消息：

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

对于成功的身份验证，足以在每个请求中添加 API的标头：

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

奇怪的是，当我使用邮递员时，回复会给我发送一个＆＃34; 401未经授权的＆＃34;身体部分以下的反应。但我在浏览器控制台中看不到任何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));
    }

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

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

1 个答案: