如何通过SpecRestApi在API Gateway中启用CORS及错误修复

错误信息 #

部署时出现以下错误：

failed to deploy: UPDATE_ROLLBACK_COMPLETE: Resource handler returned message: "Errors found during import:
        Unable to put integration response on 'OPTIONS' for resource at path '/products': Invalid mapping expression specified: Validation Result: warnings : [], errors : [Invalid mapping expression specified: Access-Control-Allow-Header] (Service: ApiGateway, Status Code: 400, Request ID: 2d40bd8e-6eda-4482-98f4-fdb8188179ee)"

现有代码 #

const apiSpec = parse(fs.readFileSync(path.resolve("api-spec.yaml")).toString());

apiSpec.paths[path]['options'] = {};
apiSpec.paths[path]['options']['x-amazon-apigateway-integration'] = {
  type: 'mock',
  requestTemplates: {
    'application/json': '{ "statusCode": 200 }',
  },
  responses: {
    default: {
      statusCode: '200',
      responseParameters: {
        'gatewayresponse.header.Access-Control-Allow-Headers': '\'Content-Type,X-Amz-Date,X-Api-Key\'',
        'gatewayresponse.header.Access-Control-Allow-Methods': '\'OPTIONS,POST,GET\'',
        'gatewayresponse.header.Access-Control-Allow-Origin': '\'*\''
      },
      responseTemplates: {
        'application/json': '{ "statusCode": 200 }'
      }
    }
  }
}

错误原因与修复步骤 #

问题1：缺少OPTIONS方法的响应定义 #

仅配置了mock集成，但未声明OPTIONS方法要返回的CORS响应头，导致API Gateway无法识别这些头的映射规则。

问题2：响应参数前缀错误 #

使用了gatewayresponse.header.前缀，该前缀用于全局网关响应配置，而在方法集成场景下，应使用method.response.header.前缀来映射到方法定义的响应头。

修正后的代码 #

const apiSpec = parse(fs.readFileSync(path.resolve("api-spec.yaml")).toString());

// 1. 定义OPTIONS方法的响应结构，明确声明要返回的CORS头
apiSpec.paths[path]['options'] = {
  responses: {
    '200': {
      description: 'CORS预检查响应',
      headers: {
        'Access-Control-Allow-Headers': {
          type: 'string'
        },
        'Access-Control-Allow-Methods': {
          type: 'string'
        },
        'Access-Control-Allow-Origin': {
          type: 'string'
        }
      }
    }
  },
  // 2. 配置mock集成，使用正确的响应参数前缀
  'x-amazon-apigateway-integration': {
    type: 'mock',
    requestTemplates: {
      'application/json': '{ "statusCode": 200 }'
    },
    responses: {
      default: {
        statusCode: '200',
        responseParameters: {
          'method.response.header.Access-Control-Allow-Headers': '\'Content-Type,X-Amz-Date,X-Api-Key\'',
          'method.response.header.Access-Control-Allow-Methods': '\'OPTIONS,POST,GET\'',
          'method.response.header.Access-Control-Allow-Origin': '\'*\''
        },
        responseTemplates: {
          'application/json': '{ "statusCode": 200 }'
        }
      }
    }
  }
};

额外说明 #

• 若需要全局启用CORS，也可通过API Gateway的全局网关响应配置实现，但针对特定路径配置OPTIONS方法的灵活性更高。
• 确保所有需要支持CORS的路径都添加了对应的OPTIONS方法配置。

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