Javascript 可以使用Postman访问本地端点，但不能使用Axios

我正试图在我的Javascript React应用程序中使用Axios发出一个简单的GET请求。这个请求在Postman上运行得非常好，但我无法在Axios上运行

我尝试了几种不同的代码变体，但都不起作用。以下是最简单的版本：

  import React, { useEffect } from 'react';
  import { Auth } from 'aws-amplify';

  useEffect(() => {
    const fetchRoles = async () => {
      var authToken;

      Auth.currentSession()
        .then(data => { 
          authToken = data.getAccessToken().getJwtToken();
        })
        .catch(err => console.log(err));

      var config = {
        headers: { Authorization: "Bearer " + authToken}
      };

      var bodyParameters = {
        key: "value"
      };

      axios.get("http://127.0.0.1:5000/accounts/roles", bodyParameters, config)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

    fetchRoles();
  }

我每次遇到的错误是：

127.0.0.1 - - [19/Aug/2019 14:12:27] "GET /account_management/roles HTTP/1.1" 401 -
Exception getting user An error occurred (InvalidParameterException) when calling the GetUser operation: 1 validation error detected: Value at 'accessToken' failed to satisfy constraint: Member must satisfy regular expression pattern: [A-Za-z0-9-_=.]+

---

我不理解此错误，因为我已根据此正则表达式检查了Auth令牌，它是有效的。

可能是authToken在引用它时仍然是一个承诺，您可以尝试以下操作：

  import React, { useEffect } from 'react';
  import { Auth } from 'aws-amplify';

  useEffect(() => {
    const fetchRoles = async () => {

      try {
        let data = await Auth.currentSession();
        const authToken = await data.getAccessToken().getJwtToken();
       } catch(e) {
        console.log(e)
       }

      var config = {
        headers: { Authorization: "Bearer " + authToken}
      };

      var bodyParameters = {
        key: "value"
      };

      axios.get("http://127.0.0.1:5000/accounts/roles", bodyParameters, config)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

    fetchRoles();
  }

---

可能是authToken在您引用它时仍然是一个承诺，您可以尝试以下操作：

  import React, { useEffect } from 'react';
  import { Auth } from 'aws-amplify';

  useEffect(() => {
    const fetchRoles = async () => {

      try {
        let data = await Auth.currentSession();
        const authToken = await data.getAccessToken().getJwtToken();
       } catch(e) {
        console.log(e)
       }

      var config = {
        headers: { Authorization: "Bearer " + authToken}
      };

      var bodyParameters = {
        key: "value"
      };

      axios.get("http://127.0.0.1:5000/accounts/roles", bodyParameters, config)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

    fetchRoles();
  }

---

解决了，我觉得自己很傻

作为Axios的新手，我对代码的复制过于严格。Axios代码示例用于POST。我突然意识到，通过

bodyParameters

发送有效载荷是没有意义的。移除它，然后开始工作

顺便说一句，我希望这对将来的其他人有所帮助，在Auth令牌前面加上“Bearer”完全是可选的。这两种方法都很好：

  headers: { Authorization: "Bearer " + authToken}

及

---

解决了，我觉得自己很傻

作为Axios的新手，我对代码的复制过于严格。Axios代码示例用于POST。我突然意识到，通过

bodyParameters

发送有效载荷是没有意义的。移除它，然后开始工作

顺便说一句，我希望这对将来的其他人有所帮助，在Auth令牌前面加上“Bearer”完全是可选的。这两种方法都很好：

  headers: { Authorization: "Bearer " + authToken}

及