角度$HTTP:CORS问题

Question

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

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

但是，我已经使用邮递员检查了该标头是否在响应中，它是：

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不支持CORS请求的localhost(自2010年以来是一个开放的错误(。

要解决此问题，您可以使用像 lvh.me 这样的域(它像本地主机一样指向127.0.0.1(或使用--disable-web-security标志启动chrome(假设您只是在测试(。另外，为了确定，在服务器端确保您：

• 允许访问控制公开标头：访问控制允许来源
• 访问控制允许来源： *
• 启用访问 选项请求

Answer 2

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

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

---

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

serverless.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

索引.js(λ函数(

'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 controller(

$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))
  }
);