reactjs - 为什么请求似乎永远不会离开网络浏览器？REACTJS / AWS-Amplify 应用程序

Question

有什么问题？

带有 AWS Amplify@3.0.18 的 React 应用程序有八 (8) 个配置了 API 的端点。七 (7) 个端点按预期运行；但是，最后一个端点似乎永远不会离开浏览器。相反，请求似乎正在发送（如“网络”选项卡所证明的那样），但在 21 秒后请求超时之前一直处于挂起状态。

Chrome 中的网络选项卡：

(failed)net::ERR_CONNECTION_TIMED_OUT

Firefox 中的网络选项卡

CORS FAILED

Firefox 中的控制台错误

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at https://**********.execute-api.us.east-1.amazonaws.com/prod/create. (Reason: CORS request did not succeed).

Amplify 是如何配置的？

配置特定数据是通过配置文件设置的。配置文件被导入 index.js 文件，然后在 API 端点数组中声明：

Amplify.Configure({ 
  Auth: {
  /*some auth config*/
  },
  Storage: {
  /*some storage config*/
  },
  API: {
    endpoints: [
      {
        name: "api-number-one",
        endpoint: config.apiNumberOne.URL,
        region: config.apiNumberOne.REGION
      },
      /*endpoints 2-6*/
      {
        name: "api-number-seven",
        endpoint: config.apiNumberSeven.URL,
        region: config.apiNumberSeven.REGION
      },
      {
        name: "api-that-fails",
        endpoint: config.apiThatFails.URL,
        region: config.apiThatFails.REGION
      }
    ]
  }
});

API 是否注册所有端点？

它似乎注册了所有八个。API的 Aconsole.log()显示了端点数组下列出的每个：

API 端点的 console.log()

请求是如何发送的？

  API.get("api-that-fails", "/some-path")
  .then(res => console.log(res))
  .catch(e => console.error(e))

什么是预期行为？

GET 请求被发送到 API Gateway。API Gateway 是运行 AWS Lambda 函数的触发器。现在，Lambda 只是简单地发回一个虚拟响应——此时没有复杂的业务逻辑，直到我弄清楚为什么请求没有命中 API 网关。

该请求应返回 Lambda 函数中存在的虚拟值。

什么不会发生？

API Gateway 永远不会收到来自应用程序的请求；因此 Lambda 永远不会运行。Cloudwatch 在 API 网关和 Lambda 上的日志确认两者都没有“看到”任何内容。

存在哪些奇怪的行为？

首先，其他七个 API 中的每一个都以与第八个完全相同的方式进行配置；这些功能中的每一个都没有问题。我让 amplify 确定要发送哪些标头等，它已经运行了近两年没有问题。第七个是在 4 月以与前六个相同的方式配置的 - 没有问题。

其次，作为测试措施，我将 Lambda 暴露在外（即任何东西都可以 ping 它）。如果我将 URL 指向此堆栈后面存在的唯一函数，将其放在 Chrome 或 Firefox 的地址栏中，它会立即返回虚拟值：

https://**********.execute-api.us-east-1.amazonaws.com/prod/the-path

回复：

{
  "TableName":"studioscale-members",
  "Item":{
    "userId":"userId",
    "transId":"2a55e900-bf9f-11ea-861f-9fe48bc133ae",
    "content":"content",
    "createdAt":1594050091920
  }
}

因此，这意味着 API Gateway 或 Lambda 没有问题。

最后，当 API Gateway 和 Lambda 从未从应用程序中“听到”消息时，我收到了一个 CORS 错误（通过 Firefox 提供的更广泛的解释），这很奇怪。

我尝试了什么？

(1) 确保 Lambda 的 CORS 响应正确：

由于在 Firefox 中提到了 CORS，我对来自 Lambda 的响应进行了三重四重检查，以确保它包含：

  "Access-Control-Allow-Credentials": true,
  "Access-Control-Allow-Origin": "*"

(2) 完全跳过aws-amplify。

起初我怀疑可能 amplify 没有注册最后一个端点并且无法发送它；但是，如果我用它替换API.get(...)它axios.get(...)仍然悬而未决，那么最终会出错。

(3) 将端点插入完全不同的应用程序。

作为健全性检查（因为我遗漏了任何测试授权），我在另一个应用程序中注册了端点并运行它。

/*in completely different app*/
API.get("api-that-fails", "/some-path")
.then(res => console.log(res))
.catch(e => console.error(e))

回应：

{
  "TableName":"studioscale-members",
  "Item":{
    "userId":"userId",
    "transId":"2a55e900-bf9f-11ea-861f-9fe48bc133ae",
    "content":"content",
    "createdAt":1594050091920
  }
}

(4) 切换https://协议http://

没有影响任何东西。

(5) 清理aws-amplify文档以限制可以注册的端点数量。

什么也没找到。

（6）endpoints从数组中取出（八（8）到七（7））看是否有限制。

没有影响任何东西。

(7) 清除浏览器缓存。删除堆栈。白手起家。

多次尝试，它没有任何不同。

(8)在 Firefox 控制台中参考帮助提示。

我没有安装广告拦截器或隐私保护器。另外，如果我这样做了，那不会影响其他 API 吗？

( 9) 升级aws-amplify到v1.3.3v3.0.18

最初使用v1.3.3并升级以v3.0.18查看是否可以解决任何问题。

那我现在在哪里？

我确信 AWS 不是问题。Cloudwatch 日志永远不会向 API 网关注册任何 ping，并且 Lambda 永远不会启动。端点也可以在另一个应用程序中使用，因此我知道该功能在被 ping 通时可以正常工作，并发送回也可以正常工作的响应标头。

AWS Amplify 似乎注册了端点，并且似乎将请求发送到野外 - 但没有传输数据（网络选项卡的证据）。所以感觉不像是一个错误aws-amplify。

我觉得这可能是 REACT 的问题，因为aws-amplify它可以与其他端点一起使用？

标签： reactjsaws-lambdacorsaws-api-gatewayaws-amplify