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

Question

我正在使用基于令牌的 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。

Answer 1

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

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

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

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

Answer 2

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

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