使用 Rest API Gateway lambda 集成 CORS 问题进行放大

Posted 2023-02-19

【中文标题】使用 Rest API Gateway lambda 集成 CORS 问题进行放大

【英文标题】：Amplify with Rest API Gateway lambda integration CORS issues

【发布时间】：2021-01-08 23:59:03

【问题描述】：

我使用 amplify 设置了一个快速无服务器 lambda。我添加了似乎在互联网上的标题。直到最近我才添加了星星，因为我对此感到非常沮丧。

我的 lambda 标头

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Credentials", true),
  res.header("Access-Control-Allow-Methods", "*")
  res.header("Access-Control-Allow-Headers", "*")
  
  next()
);

我通过放大创建rest网关，还添加了一个路径并选择“仅认证用户”，然后推送网关。我不知道是否有必要，但我也去网关内的路由和“启用 Cors”和“部署网关”。每次添加新路线后，我都会这样做。我已经为网关打开了日志记录，它似乎使用正确的标头进行响应，但在 lambda 端，它永远不会使用放大托管堆栈从云端通过网关触发。

(878907ef-3f7c-4970-a336-227af689ada0) Method response headers: Access-Control-Allow-Headers=Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Methods=DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT, Access-Control-Allow-Origin=*, Content-Type=application/json

如果我在本地配置 main.ts 文件（如下所示），则会在我的 Angular 应用程序 (http://localhost:4200) 上导致 Cors 问题。但是如果我运行测试方法，我会从网关得到正确的响应。 （我知道其他错误会显示为 Cors 问题，但情况并非如此）

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
API.configure(awsconfig);
Auth.configure(awsconfig);

如果我在本地 (http://localhost:4200) 配置 angular main.ts 文件（如下所示），则会导致 lambda 成功响应。完全没有任何 Cors 错误。

import  Amplify  from 'aws-amplify';
Amplify.configure(awsconfig);

但是当我尝试将放大应用程序推送到放大托管云堆栈时，问题又出现了。如果我使用以下配置，那么控制台中的应用程序会告诉我 "TypeError: Cannot read property 'aws_appsync_region' of null" 从不引导。

TypeError: Cannot read property 'aws_appsync_region' of null
    at t._graphqlSubscribe (main-es2015.9d63c1e97711d41894ae.js:1)
    at t.graphql (main-es2015.9d63c1e97711d41894ae.js:1)
    at t.graphql (main-es2015.9d63c1e97711d41894ae.js:1)
    at new t (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.t.ɵfac [as factory] (main-es2015.9d63c1e97711d41894ae.js:1)
    at ks.hydrate (main-es2015.9d63c1e97711d41894ae.js:1)
    at ks.get (main-es2015.9d63c1e97711d41894ae.js:1)
    at tt (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.et (main-es2015.9d63c1e97711d41894ae.js:1)
    at Object.t.ɵfac [as factory] (main-es2015.9d63c1e97711d41894ae.js:1)

import  Amplify  from 'aws-amplify';
Amplify.configure(awsconfig);

但是，如果我在配置中重新添加，它会使用 'aws_appsync_region' 删除上述错误消息，但会直接回到 lambda 的 Cors 问题。

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
import  Amplify  from 'aws-amplify';
Amplify.configure(awsconfig);
API.configure(awsconfig);
Auth.configure(awsconfig);

在控制台中显示。

Access to XMLHttpRequest at 'https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/sandbox/blind/get' 
from origin 'https://sandbox.whatever.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.
main-es2015.dc59a351503c7e4f109f.js:1 ERROR Error: Network Error
    at LYNF.t.exports (main-es2015.dc59a351503c7e4f109f.js:1)
    at XMLHttpRequest.d.onerror [as __zone_symbol__ON_PROPERTYerror] (main-es2015.dc59a351503c7e4f109f.js:1)
    at XMLHttpRequest.T (polyfills-es2015.026fcb2559269e9f129a.js:1)
    at l.invokeTask (polyfills-es2015.026fcb2559269e9f129a.js:1)
    
VM279:1 POST https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/sandbox/blind/get net::ERR_FAILED

我只想让这些愚蠢的 Cors 错误消失，并能够将我的应用程序推送到它所属的堆栈下的云中。我已经删除了所有其他堆栈，因为它们都没有工作。在这些错误上与放大、api 网关和 lambda 作斗争似乎很荒谬。任何人都请向我解释问题出在哪里以及如何解决。我觉得我已经阅读了所有相关和不相关的文章，并且到了一半，却发现我无法部署应用程序。

【参考方案1】：

对于遇到相同问题的其他人。有时它不是真正的 CORS 问题（我知道），但不知道如何调试它。根据 AWS，放大身份验证版本 3.4.4 中存在一个已知错误。

建议的第一步是更改 amplify 配置服务的方式。仅此一项并不能解决问题，我还没有反过来测试它。

import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';
import  Amplify  from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Amplify.register(Auth);
Amplify.register(API);

接下来（对于角度）将环境配置中的buildOptimizer 更改为false。

"buildOptimizer": false,

完成这些步骤后，我能够将代码推送到云端并按预期登录。和我的本地系统一样。如果上述步骤不起作用，另一个推荐的步骤是将 Amplify Auth 降级为3.3.2。

"@aws-amplify/auth": "3.3.2"