从请求中剥离的 CORS 自定义标头

Posted 2023-02-27

【中文标题】从请求中剥离的 CORS 自定义标头

【英文标题】：CORS custom header stripped from request

【发布时间】：2020-03-11 00:32:51

【问题描述】：

我正在使用基于令牌的 lambda 授权器，如下所述： https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-use-lambda-authorizer.html

现在我仍在使用标题道具为tokenHeader的玩具示例

我的获取如下：

export function logout() 
    return (dispatch, getState) => 
      return fetch('https://account-api.example.com/v1/logout', 
        method: 'GET',
        headers: 
          'Access-Control-Request-Method': 'GET',
          'Access-Control-Request-Headers': 'Content-Type, Authorization',
          'Content-Type': 'application/json',
          'tokenHeader':'allow',
        ,
        credentials: 'include'
      )
        .then((response) => 
          return response.json().then((body) => 
            return 
              status: body.statusCode,
              payload:body.payload,
            ;
          ,
          );
        )
        .then((response) => 
          console.log("response", response)
          if (response.status !== 200) 
            dispatch( type: 'LOGOUT_ERROR', payload: response.payload.error);
          
          if (response.status === 200) 
            dispatch( type: 'LOGOUT_SUCCESSFUL', payload: response.payload );
          
        )
        .catch(error => 
          dispatch( type: 'LOGOUT_FAILED', payload: String(error));
        )
    ;
  

当我查看网络选项卡时，我的请求中缺少 'tokenHeader':'allow' 标头，从而导致来自授权方的 401 - 我需要做些什么来防止此标头被剥离？

旁注：此请求适用于邮递员

API 网关配置（不确定这是否相关）：

选项 要求 回复

获取 要求 回复

我不想忽略 CORS，并且在 account-api.example.com 和 dev.example.com 之间发送数据，所以请不要回答指示删除/忽略 cors - 我的目标是正确实施 cors。

【问题讨论】：

请问您是如何部署 API 网关的

@pubudut 当然，你在看什么？我使用的是 AWS UI 而不是 CLI 或无服务器，我可以分享哪些有助于调试的内容？谢谢，-E

您尝试过这种方法吗serverless.com/blog/cors-api-gateway-survival-guide 这基本上是无服务器方法。Postman 不进行预检检查，因此它可以在那里工作，但浏览器可以。我能够使用这种方法来处理 cors。

如果您使用控制台，那么您可以将标头添加到您的 API 网关响应标头以允许 cors

@pubudut 是的，我使用了该指南的各个方面 - 我的端点工作，并且我的浏览器能够访问它 - 问题是我的标头 tokenheader 已从请求标头中剥离。如果我将授权人更改为默认设置为“允许”，它可以正常工作 - 这表明（我认为）这不是明确的 cors 问题，而是 fetch-api 从请求中剥离了我的自定义标头

【参考方案1】：

问题中的详细信息表明自定义标头未在 CORS 预检 OPTIONS 请求中发送。这是意料之中的——您在前端代码中设置的任何自定义标头都不会包含在 CORS 预检 OPTIONS 请求中。你无法阻止这种行为。

所以底线是：如果您使用的身份验证机制依赖于将特定标头添加到请求中，则需要将服务器配置为不需要 OPTIONS 请求的自定义标头 - 因为 CORS 协议需要服务器允许OPTIONS 请求无需任何身份验证。

更详细地说，发生的事情是这样的：

您的代码告诉您的浏览器它想要发送一个带有自定义 tokenHeader 标头的请求。 您的浏览器显示，好的，带有 tokenHeader 标头的请求要求我执行 CORS 预检 OPTIONS 以确保服务器允许带有 tokenHeader 标头的请求。 您的浏览器将OPTIONS 请求发送到服务器没有tokenHeader 标头，因为OPTIONS 检查的全部目的是查看是否可以包含该标头。 您的服务器看到了 OPTIONS 请求，但没有以表明它允许请求中包含 tokenHeader 标头的方式对其进行响应，而是使用 401 拒绝它，因为它缺少标头。 您的浏览器期望 CORS 预检得到 200 或 204 响应，但得到的是 401 响应。因此，您的浏览器会停在那里，并且永远不会尝试来自您的代码的 GET 请求。

【参考方案2】：

您可能需要对 AWS 控制台执行此方法

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

【讨论】：

我相信我已经完成了所有这些工作——我使用 API Gateway 设置更新了我的问题。我不确定为什么，无论我的 API 网关设置如何，浏览器都没有在网络中显示自定义标头——这就是让我认为 fetch-api 有问题的部分

这个medium.com/@slmkitani/…怎么样

我刚离开我的电脑 - 我会试一试，让你知道！我不确定授权人在堆栈中的位置