angularjs - Angular $HTTP：CORS 问题

Question

当我使用$http角度调用我的 API 点时，我不断收到 502 错误。
确切的错误是这样说的：

无法加载https://xxxxxxxxx.execute-api.eu-west-2.amazonaws.com/dev/api/fund：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:3000 ”。响应具有 HTTP 状态代码 502。

但是，我已经使用 Postman 检查了该标头是否在响应中，并且它是：

Access-Control-Allow-Origin →*
Connection →keep-alive
Content-Length →30
Content-Type →application/json
Date →Tue, 03 Jul 2018 10:01:11 GMT
Via →1.1 xxxxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)

当我对同一个 URL 进行 OPTIONS 调用时，这里是使用 Postman 的响应的标头：

Access-Control-Allow-Credentials →false
Access-Control-Allow-Headers →Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
Access-Control-Allow-Methods →OPTIONS,POST
Access-Control-Allow-Origin →*
Connection →keep-alive
Content-Length →0
Content-Type →application/json
Date →Tue, 03 Jul 2018 10:18:17 GMT
Via →1.1 xxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id →T_CC-vaqRAoxqnzFZdB9KMI9CAIPQvKAxCat2NPLyaJ5MPpdTVhF1g==
X-Cache →Miss from cloudfront
x-amz-apigw-id →JckIhHWmrPEFcqQ=
x-amzn-RequestId →675517fc-7eaa-11e8-8290-39c903c321e4

这是我一直在尝试调用 API 的代码，非常直截了当，我真的很困惑可能是什么错误：

  $scope.fundAsset = function(assetID, userID){
    $http({
      method: 'POST',
      url: 'https://xxxxxxxxxxx.execute-api.eu-west-2.amazonaws.com/dev/api/fund',
      body: {
        userID: userID,
        assetID: assetID
      }
    }).then(function successCallback(response) {
      console.log(response);
    });
  };

Answer 1

Chrome 不支持 localhost 的 CORS 请求（自 2010 年以来的一个开放错误）。

要解决这个问题，您可以使用像 lvh.me 这样的域（它指向 127.0.0.1，就像 localhost 一样）或使用 --disable-web-security 标志启动 chrome（假设您只是在测试）。还要确定的是，在服务器端确保您：

• 允许访问控制公开标头：访问控制允许来源
• 访问控制允许来源：*
• 也启用对 OPTIONS 请求的访问

Answer 2

在您的 Lambda 函数中，确保您正在返回Access-Control-Allow-Origin标头。

        var response = {
             statusCode: 200,
             headers: {
                 "Access-Control-Allow-Origin" : "*"
             },
             body: JSON.stringify({
                 someReturnData
             })
        };
        callback(null, response);

---

为了进一步推断，这是来自我的工作解决方案：

无服务器.yml

functions:
  ping:
    handler: index.ping
    events:
      - http:
        path: ping 
        method: post
        cors:
          origins:
            - '*'
          headers:
            - Content-Type
            - X-Amz-Date
            - Authorization
            - X-Api-Key
            - X-Amz-Security-Token
          allowCredentials: true

index.js（Lambda 函数）

'use strict';

module.exports.ping = (event, context, callback) => {
    const response = {
        statusCode: 200,
        headers: {
                "Access-Control-Allow-Origin" : "*"
              },
        body: JSON.stringify({
            message: 'Pong',
            input: event,
        }),
    };
    callback(null, response);
};

ping.controller.js（AngularJS 控制器）

$http({
    method: 'POST',
    url: config.apiRoot + '/ping',
    headers: {
        'Content-Type': 'application/json',
    },
    data: JSON.stringify(data)
}).then(
    function successCallback () {
        $scope.feedback = "Ping Success";
    },
    function errorCallback (response) {
        $scope.feedback = "Ping Failed: " + JSON.stringify(response))
    }
);