亚马逊跨域请求被阻止：

Question

我们的后端使用 Angular 4 构建，并使用无服务器部署在 AWS S3 上。一切都很好，但我们有一个小问题。如果添加了自定义标头，则会引发如下警告。

“跨域请求被阻止：同源策略不允许读取https://7uqw9ghjr7.execute-api.eu-west-2.amazonaws.com/uat/user的远程资源 . （原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“app_version”）。”

“跨域请求被阻止：同源策略不允许读取https://7uqw9ghjr7.execute-api.eu-west-2.amazonaws.com/uat/user的远程资源 . （原因：CORS 请求没有成功）。”

“app_version”是我添加的自定义标头。

如果我删除此自定义标头，一切正常。

如果有任何帮助，我将不胜感激。

我需要修复这个“跨域请求被阻止”问题并添加我的自定义标头。

这是包含在每个 REST API 调用中的 HttpHeader 代码

headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'app_version': '1.0'
  })

Answer 1

“我们的后端是用 Angular 4 构建的，它使用无服务器部署在 AWS S3 上。”：也许你的意思是前端正在与后端的一些 REST API 服务交互（？）。

您可以进一步澄清您的场景，但根据您的最后几行：“这是包含在每个 REST API 调用中的 HttpHeader 代码”我可以推断这是使用 Lambda 代理方法使用 API Gateway 时的经典 CORS 错误，请记住这就是无服务器框架在默认情况下的工作方式。请阅读：https://serverless.com/framework/docs/providers/aws/events/apigateway/

因此，您始终必须在响应中返回一组完整的标头，从而允许跨域资源共享：

let response = {
    statusCode: 200,
    headers: {
        //"Content-Type": "application/json",
        "X-Requested-With": '*',
        "Access-Control-Allow-Headers": 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Requested-With',
        "Access-Control-Allow-Origin": '*',
        "Access-Control-Allow-Methods": 'GET, OPTIONS',
        "Access-Control-Allow-Credentials": true// Required for cookies, authorization headers with HTTPS 
    },
    body: body
}

在某些情况下，这可能会导致一些繁琐的任务，因此您可以使用 Middy 来检查运行良好的解决方案：https://github.com/middyjs/middy