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

我想在我的react项目中通过axios从服务器获取一些数据。当我把浏览器的网址，并进入浏览器问我的用户名和密码，然后，我可以看到JSON数据。但我不知道如何在get方法中设置axios头中的密码和用户名。我在很多论坛和网页上搜索过它，特别是这个链接对我没有帮助：Sending axios get request with authorization header。所以最后我尝试了（很多事情在此之前，但我更困惑）：如何在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: 
[email protected]://localhost:3000/static/js/bundle.js:2195:15 
[email protected]://localhost:3000/static/js/bundle.js:1724:14

其实，API文档提到，用这句话：

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

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

对于成功的鉴别是足以在每个请求头的API补充：

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

奇怪的是，当我使用邮递员，响应给我下面的身体部分“401未授权”的响应。但是我在浏览器的控制台中看不到任何401错误。

来源

2017-10-04 escalepion

我觉得网址是不是密码保护api，请确认，或pllease共享api的url –

对不起，我不能分享网址，是的，网址是受保护的，正如我上面提到的，它说我们必须在get方法的头文件中设置授权。 – escalepion

然后首先你必须登录，登录将无需标题访问，这将返回令牌，通过这个令牌，我们将能够访问其他apis –

好吧，我找到了解决方案。正如我在为我的问题写的评论中提到的那样，还有一个Cors问题。我发现cors问题出现，因为我无法正确授权。所以Cors是我的问题的一个自然结果。无论..我想分享我的解决方案，我希望它可以帮助另一个人，因为我couldent找到一个明确的授权范例与反应和axios。

我通过NPM安装基础-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)); 
    }

不要忘记获得授权在单引号和不几个小时奋斗像我:)

来源

2017-10-04 19:53:51 escalepion

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

回答

相关问题