无服务器 AWS Lambda CORS 错误

Question

我将尝试在AngularJS应用程序中向使用Serverless设置的Lambda函数发出HTTP请求。

以下是我的serverless.yaml函数：

functions:
   createcustomer:
    handler: handler.createcustomer
    events: 
      - http: post /createcustomer
        cors: true

创建客户函数

module.exports.createcustomer = (event, context, callback) => {

    let customer = JSON.parse(event.body).customer;

    service.create(customer, function(result) {
        let response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Credentials": true,
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                result: 'Created Customer Successfully',
                message: 'The account has been created!',
                type: 'success',
                customer: result
            })
        };
        callback(null, response);
    });
};

我从我的AngularJS应用程序中这样调用它

app.factory('MyFactory', ['$http', function($http) {
    return {
        CreateCustomer: function(customer) {$http.post('<apipath>/createcustomer', {customer:customer})}
    }
}]);

然而，我一直遇到这个错误：

预检请求的响应未能通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，来自 'http://localhost:5000' 的来源不被允许访问。响应的HTTP状态码为403。

我尝试在POST方法中启用API Gateway中的CORS，但结果并没有改变。

我还尝试在yaml文件中明确设置CORS。

functions:
   createcustomer:
    handler: handler.createcustomer
    events: 
      - http: post /createcustomer
        cors:
          origin: '*'

仍然没有运气。

有人知道我做错了什么吗？

一个奇怪的事情是，我可以通过PostMan成功地获取帖子，但如果我尝试通过我的应用程序获取它，则会出现错误。

谢谢

更新

当我执行serverless deploy时，它会在AWS中显示如上图所示，并且该方法看起来像这样。

如我之前所说，我尝试直接从API Gateway控制台启用CORS，但当我尝试调用该方法时并没有任何区别。

- DevShadow

---

尝试在Lambda响应中添加Access-Control-Allow-Headers头。 - Kaustubh Khare

@KaustubhKhare 尝试了，仍然没有运气。 - DevShadow

根据您发布的内容，看起来是正确的。我建议您检查API Gateway控制台和Lambda控制台，以确保这些设置已正确反映并部署。 - Noel Llevares

如果我在Angular中的HTTP请求中将Content-Type设置为text/plain，则可以获得响应，但使用application/json会失败。 - DevShadow

涉及发送预检选项检查，但当我在API路径上设置选项时，仍然在发送application/json时失败。 - DevShadow

Answer 1

您发的截图显示这些资源都没有设置OPTIONS方法。当您在控制台上启用API Gateway资源的CORS时，AWS会自动设置它。您可以在AWS控制台上启用CORS并查看此操作，但是通过 "serverless deploy" 命令行部署时，会覆盖此配置。

为了使 "/createcustomer" 资源在 AWS 上得到正确配置，您可以修改 serverless.yaml 中的以下内容：

events: 
  - http: post /createcustomer
    cors: true

要看起来像这样：

events:
  - http:
      path: /createcustomer
      method: post
      cors: true

我不是框架 .yml 语法的专家，所以无法准确解释这是为什么。

尽管如此，我已经确认一个像这样的文件:

functions:
  deletecustomer:
    handler: handler.deletecustomer
    events:
      - http:
          path: /deletecustomer
          method: post
          cors: true
  createcustomer:
    handler: handler.createcustomer
    events: 
      - http: post /createcustomer
        cors: true

将在AWS API Gateway中创建两个资源，一个正确配置了CORS，另一个缺少OPTIONS方法:

- Mike Patrick

Answer 2

以下配置可能会有所帮助。请注意，在允许CORS来源时，具体指定是最安全的。因此，最好将来源锁定在localhost:{port-number}上。此外，您还可以在CORS设置中启用凭据。请参阅以下无服务器配置示例：

cors:
  origin: 'http://localhost:4200'
  headers:
    - Content-Type
    - X-Amz-Date
    - Authorization
    - X-Api-Key
    - X-Amz-Security-Token
    - X-Amz-User-Agent
  allowCredentials: true

- Suken Shah

Answer 3

我曾经遇到过类似的问题，但是还没有将其拆分为不同的 Lambda 函数（所有内容都在一个函数下）。

在绕了很多圈之后，我意识到在查看文档时我漏掉了一些东西，我可以一次性允许这个而不是针对每个端点进行设置。

添加以下内容即可解决：

provider:
  httpApi:
    cors: true

我一直将这个添加到function中，但实际上它需要在provider中。

- raaid

---

这对我来说非常完美！谢谢你！ - David Valenzuela Urrutia

Answer 4

cors配置已经移动到提供者配置中：

provider: httpApi: cors: true

- Ogwok William