CORS 自定义 header 从请求中删除

Question

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

现在我还在使用玩具示例，其中 header 道具是 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' header，导致授权方返回 401 - 我需要做什么来防止这种情况发生 header免于被剥夺？

旁注：此请求适用于 postman

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

选项
要求回复

得到
要求回复

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

Answer 1

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

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

Answer 2

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

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

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

您的代码告诉您的浏览器它想要发送带有自定义 tokenHeader header.
您的浏览器说，好的，带有 tokenHeader header 的请求需要我进行 CORS 预检 OPTIONS 以确保服务器允许带有 tokenHeader 的请求header.
您的浏览器将 OPTIONS 请求发送到服务器 而没有 tokenHeader header，因为 OPTIONS 检查是为了查看是否可以包含 header.
您的服务器看到了 OPTIONS 请求，但没有以表明它允许请求中的 tokenHeader header 的方式响应它，而是用 401 拒绝它，因为它缺少 header.
您的浏览器期望 CORS 预检响应为 200 或 204，但却得到了 401 响应。所以你的浏览器就停在那里，永远不会尝试来自你的代码的 GET 请求。

CORS 自定义 header 从请求中删除

CORS custom header stripped from request

cors

preflight

aws-api-gateway

fetch-api

lambda-authorizer