配置CORS后Vue.js调用带Custom Authorizer的Api Gateway仍报跨域错误求助

首先咱们理清核心差异：Postman调用正常但Vue的Axios请求失败，关键在于浏览器会自动发送预检OPTIONS请求，而Postman不会触发严格的预检流程。当API Gateway配置了Custom Authorizer时，如果OPTIONS请求被错误要求经过授权，就会因为它不带Authorization头而被拒绝，导致没有返回CORS所需的响应头，进而触发浏览器的CORS拦截。

以下是一步步排查和解决的方案：

1. 修正SAM模板的CORS配置格式 #

你当前的CORS配置里，AllowHeaders和AllowOrigin的值带了多余的单引号，这会导致API Gateway返回的响应头格式不符合规范：

Cors:
  AllowHeaders: "'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization'"
  AllowOrigin: "'*'"

正确配置应该去掉单引号，SAM会自动处理字符串包裹：

Cors:
  AllowHeaders: "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"
  AllowOrigin: "*"
  AllowMethods: "GET,OPTIONS" # 明确指定允许的方法，避免默认值遗漏

2. 确保OPTIONS请求不经过Custom Authorizer #

Custom Authorizer默认会应用到API的所有方法上，但OPTIONS预检请求不需要授权。你需要在SAM模板中，为OPTIONS方法单独配置跳过授权：

假设你的API资源和方法定义如下，重点标记了OPTIONS的配置：

Resources:
  MyApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Prod
      Cors:
        AllowHeaders: "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"
        AllowOrigin: "*"
        AllowMethods: "GET,OPTIONS"
  MyFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: src/
      Handler: app.lambdaHandler
      Events:
        GetRequest:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /my-resource
            Method: get
            Auth:
              Authorizer: MyCustomAuthorizer # 仅对GET方法应用授权
        OptionsRequest:
          Type: Api
          Properties:
            RestApiId: !Ref MyApi
            Path: /my-resource
            Method: options
            # 这里不配置Auth，让API Gateway直接处理OPTIONS请求
  MyCustomAuthorizer:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: authorizer/
      Handler: authorizer.handler

这样配置后，OPTIONS请求会由API Gateway直接处理，返回正确的CORS头，不会触发Custom Authorizer的校验。

3. 规范Axios请求的头格式 #

你的Axios代码中authorization头是小写的：

const config = { headers: { authorization: jwt } }

虽然HTTP头不区分大小写，但部分Custom Authorizer可能会严格检查Authorization（首字母大写）的头字段，建议改成标准格式：

const config = { headers: { Authorization: jwt } }

4. 验证预检请求的响应 #

打开浏览器开发者工具的Network面板，查看OPTIONS请求的详情：

• 确认请求状态码为200
• 确认响应头包含Access-Control-Allow-Origin: *、Access-Control-Allow-Headers包含Authorization等字段
• 如果OPTIONS请求返回401/403，说明Custom Authorizer被错误触发，需要回到步骤2调整配置

按照以上步骤调整后，Vue应用的Axios请求应该就能正常通过CORS验证了。

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