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

我想在react项目中通过axios从服务器获取一些数据。当我把url放在浏览器上，点击enterbrowser，询问用户名和密码，然后我就可以看到json数据了。但是我不知道如何在get方法中设置axios头中的密码和用户名。我已经在很多论坛和页面上搜索过了，尤其是这个链接对我没有帮助：。所以最后我尝试了（在这之前有很多事情，但我更困惑）：

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

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未授权请求”}

对于成功的身份验证，添加每个请求就足够了 API的标题：

授权：基本

---

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

好的，我找到了解决方案。正如我在为我的问题撰写的评论中提到的，还有一个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));
    }

---

别忘了用单引号获得授权，不要像我一样挣扎数小时：）

好的，我找到了解决方案。正如我在为我的问题撰写的评论中提到的，还有一个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));
    }

---

不要忘记用单引号获得授权，不要像我一样挣扎数小时：）

我认为url是受密码保护的，而不是api，请确认，或者请为api共享url对不起，我不能共享url，是的，url是受保护的，正如我上面提到的，它说我们必须在get方法的头中设置一个授权。然后首先您必须登录，登录将可以在没有头的情况下访问，该wil return令牌，通过该令牌我们将能够访问其他apiscor错误？检查控制台中的“网络”选项卡您可以尝试类似于so

axios.get的操作http://usrnm:pswrd@my_url/api/stb'）

我认为url受密码保护，而不是api，请确认，或者请为api共享url对不起，我无法共享url，是的，url受保护，正如我上面提到的，它说我们必须在get方法的头中设置一个授权。然后首先您必须登录，登录将可以在没有头的情况下访问，该wil return令牌，通过该令牌我们将能够访问其他apiscor错误？检查控制台中的“网络”选项卡您可以尝试类似于so

axios.get的操作http://usrnm:pswrd@my_url/api/stb'）

无论如何，您可以使用

btoa（tok）

而无需安装base-64库。对于React-Python3Flask-Nginx-AWS构建flask_cors库，无需更改任何其他移动部件（即Nginx）即可使用此答案自2019年2月起。无论如何，您可以使用

btoa（tok）

而无需安装base-64库。对于React-Python3Flask-Nginx-AWS构建，自2019年2月起，flask_cors库使用此答案，无需更改任何其他移动部件（即Nginx）。

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

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));
    }