Axios调用带Cognito认证的AWS API Gateway时出现Network Error的原因

未开启认证时，Axios可正常调用API并获取结果（已配置CORS）；但将API Gateway的Method认证方式设为Cognito用户池后，携带JWT Token作为Authorization头调用时，Axios抛出Network Error。相同Token用Postman测试可正常返回结果，且已在API Gateway授权器中验证过Token有效性。

无认证时的调用代码 #

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(Dashboard);
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

调用结果 #

['Data']

关联Lambda函数代码 #

import json

def lambda_handler(event, context):
    print(event)
    
    response = {
    "category": "Success",
    "command": "Overview",
    "data": ['Data']
}

    return {
        'statusCode': 200,
        'headers': {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*"
        },

        'body': json.dumps(response)
    }

开启认证后的调用代码 #

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(
          Dashboard,
          {},
          {
            headers: {
              Authorization: idToken,
            },
          }
        );
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

抛出的错误 #

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

排查与解决步骤 #

• 更新CORS配置，允许Authorization头
  无认证时仅允许Content-Type，开启认证后请求携带了Authorization头，需修改两处配置：

  1. 在API Gateway的CORS设置中，将Access-Control-Allow-Headers值改为Content-Type,Authorization
  2. 同步更新Lambda返回的响应头：

     'headers': {
         "Access-Control-Allow-Headers" : "Content-Type,Authorization",
         "Access-Control-Allow-Origin": "*"
     }
     

• 排除OPTIONS方法的认证校验
  浏览器发送带自定义头的请求前会先发起OPTIONS预检，该请求不会携带Authorization头，若被Cognito授权器拦截会导致预检失败。需在API Gateway中，将OPTIONS方法的认证类型设为NONE。

• 验证Token格式与传递正确性
  确认前端传入的idToken是完整有效的JWT字符串，无拼写错误或多余空格；若API Gateway要求Bearer前缀，需调整为Authorization: Bearer ${idToken}。

• 查看浏览器网络请求详情
  打开开发者工具Network面板，检查失败请求的具体状态码与响应内容：

  • 若OPTIONS请求返回4xx，优先排查CORS配置与认证规则
  • 若POST请求返回401/403，检查Token的有效期、受众（Audience）是否与授权器配置匹配

内容的提问来源于stack exchange，提问作者Mehbenmeh