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

时间:2019-11-14 21:56:32

标签: cors aws-api-gateway fetch-api preflight lambda-authorizer

我正在使用基于令牌的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-我该怎么做才能防止此标头被剥夺?

request is missing tokenHeader header

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

API网关配置(不确定是否相关):

选项
  请求 OPTIONS Method Request   响应 OPTIONS Integration Response

获取
  请求 GET Method Request   响应 GET Integration Response

我不想忽略CORS并在account-api.example.comdev.example.com之间发送数据,因此请不要提供任何指示以删除/忽略cors的答案-我的目标是正确实现cors。

2 个答案:

答案 0 :(得分:0)

问题中的详细信息表明,自定义标头未在CORS预检OPTIONS请求中发送。这是预期的-您在前端代码中设置的所有自定义标头都不会包含在CORS预检OPTIONS请求中。您无法阻止这种行为。

因此,最重要的是:如果您使用的身份验证机制依赖于添加到请求中的特定标头,则需要将服务器配置为不要求OPTIONS请求使用该自定义标头-因为CORS协议要求服务器允许tokenHeader请求而无需任何身份验证。

更详细地说,这是怎么回事:

  1. 您的代码告诉您的浏览器它想发送带有自定义tokenHeader标头的请求。
  2. 您的浏览器说,确定,带有OPTIONS标头的请求要求我执行CORS预检tokenHeader,以确保服务器允许带有OPTIONS标头的请求。
  3. 您的浏览器将tokenHeader请求发送到服务器而没有OPTIONS头文件,因为OPTIONS检查的整个目的是查看是否可以包括该标题。
  4. 您的服务器看到了tokenHeader请求,但没有以表明它允许请求中的GET标头的方式对其进行响应,而是由于缺少标头而以401拒绝了它。
  5. li>
  6. 您的浏览器期望CORS飞行前响应为200或204,但会得到401响应。因此,您的浏览器就在那里停止了,并且再也不会尝试从您的代码发出{{1}}请求。

答案 1 :(得分:-1)

对于AWS控制台,您可能需要遵循这种方法

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