AWS Lambda API跨域问题：Access-Control-Allow-Credentials头值为空

现有所有尝试的解决方案均无效：调用AWS Lambda API时，响应中的Access-Control-Allow-Credentials头值为空，但该值必须设为true。

我的Lambda函数代码 #

module.exports.handler = async(event, context, callback) => {
  
  return { 
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Credentials" : 'true',
      'Access-Control-Allow-Origin': 'mydomain_name',
      'Access-Control-Allow-Methods':'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT',
      'Access-Control-Allow-Headers':'content-type,authorization',
      
    },
    body: JSON.stringify({
      message: `Charge processed succesfully!`,
      success:true,
     
    }),
  }
}

错误信息 #

The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

前端代码 #

const config = {
  headers: { 
    'Authorization': 'Bearer ' + Message.cookey_key, 
    "Content-Type":'application/json',
    withCredentials:true, 
    credentials: 'include' 
  },
  
};
await PaymentAppApi.post(`/`,payment_item,config).then((res)=>{
   
   responseData = res.data
   console.log(res)
   //console.log(res.data[0]+" cal ki hoi na !!! , , ,!"+res.data)
  
}).catch((err)=>{ console.log(err," error")})

已做的配置 #

我已查阅大量相关帖子但问题未解决，当前API Gateway配置：

• 已启用CORS并集成代理
• OPTIONS方法未使用Mock，而是集成到Lambda函数中
• CORS配置值如下：

Access-Control-Allow-Methods : 'DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT' 
Access-Control-Allow-Headers  : 'COntent-Type, Authorization'
Access-Control-Allow-Origin*  : 'mydomain_name'
Access-Control-Allow-Credentials : 'true'

请问该如何修复此问题？

解决方案 #

1. 单独处理OPTIONS预检请求 #

因为你把OPTIONS方法集成到了Lambda，必须确保Lambda在处理OPTIONS请求时也返回正确的Access-Control-Allow-Credentials: true头——浏览器会先发送OPTIONS预检，预检不通过直接触发报错。修改Lambda代码：

module.exports.handler = async(event, context, callback) => {
  // 处理OPTIONS预检请求
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Credentials": 'true',
        'Access-Control-Allow-Origin': 'mydomain_name',
        'Access-Control-Allow-Methods':'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT',
        'Access-Control-Allow-Headers':'content-type,authorization',
      },
      body: JSON.stringify({}),
    }
  }

  // 处理POST等业务请求
  return { 
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Credentials" : 'true',
      'Access-Control-Allow-Origin': 'mydomain_name',
      'Access-Control-Allow-Methods':'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT',
      'Access-Control-Allow-Headers':'content-type,authorization',
      
    },
    body: JSON.stringify({
      message: `Charge processed succesfully!`,
      success:true,
     
    }),
  }
}

2. 修正CORS配置的拼写错误 #

你的Access-Control-Allow-Headers里写成了COntent-Type（大小写错误），这会导致浏览器判定该头不被允许，进而影响凭证携带。改成标准的Content-Type。

3. 清理Access-Control-Allow-Origin的多余符号 #

你配置里的Access-Control-Allow-Origin*多了个星号，直接改成Access-Control-Allow-Origin: 'mydomain_name'——允许凭证时Origin必须是具体域名，不能用通配符。

4. 调整前端withCredentials的位置 #

你把withCredentials:true放在了headers对象里，这是错误的（以Axios为例，该配置是和headers同级的）。修正后：

const config = {
  headers: { 
    'Authorization': 'Bearer ' + Message.cookey_key, 
    "Content-Type":'application/json'
  },
  withCredentials: true, // 移到此处，与headers同级
  credentials: 'include'
};
await PaymentAppApi.post(`/`,payment_item,config).then((res)=>{
   responseData = res.data
   console.log(res)
}).catch((err)=>{ console.log(err," error")})

5. 检查API Gateway集成的头传递 #

进入API Gateway对应资源的「集成请求」->「映射模板」，确认没有自定义规则覆盖或移除Access-Control-Allow-Credentials头。

内容的提问来源于stack exchange，提问作者Blockchain Kid