Chrome扩展跨域报错：预检响应未允许Content-Type请求头

核心问题 #

你遇到的跨域报错，根源在于后端的CORS配置没有允许前端请求中携带的Content-Type头部。

你的前端请求明确设置了Content-Type: application/json，但后端headers对象里的Access-Control-Allow-Headers只声明了Access-Control-Request-Private-Network，这个字段不包含Content-Type，所以浏览器在预检OPTIONS请求时判定该头部不被允许，直接拦截了后续请求。

修复步骤 #

1. 更新CORS允许的头部列表
   修改后端的Access-Control-Allow-Headers配置，把Content-Type加进去：

   const headers = {
     "Cache-Control": "no-cache",
     "Cross-Origin-Opener-Policy": "unsafe-none",
     "Cross-Origin-Embedder-Policy": "unsafe-none",
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Private-Network": "true",
     // 补充Content-Type到允许的头部列表
     "Access-Control-Allow-Headers": "Access-Control-Request-Private-Network, Content-Type",
     "Access-Control-Allow-Methods": "OPTIONS,POST,GET,HEAD,QUERY,query",
   };
   

2. 补充POST请求的响应返回
   你的POST处理逻辑最后没有返回任何响应，前端会因为无法获取到服务器响应而报错。需要在POST分支末尾添加返回语句：

   if (event.httpMethod === "POST") {
     console.log("event.httpMethod: ", event.httpMethod);
     console.log("event.body: ", event.body);
     const data = JSON.parse(event.body);
     console.log("data: ", data);
     // 添加响应返回
     return {
       statusCode: 200,
       headers: headers,
       body: JSON.stringify({ message: "数据接收成功", data: data })
     };
   }
   

完整修正后的后端代码 #

const headers = {
  "Cache-Control": "no-cache",
  "Cross-Origin-Opener-Policy": "unsafe-none",
  "Cross-Origin-Embedder-Policy": "unsafe-none",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Private-Network": "true",
  "Access-Control-Allow-Headers": "Access-Control-Request-Private-Network, Content-Type",
  "Access-Control-Allow-Methods": "OPTIONS,POST,GET,HEAD,QUERY,query",
};

exports.handler = async function (event, context) {

  console.log("context: ", context);
  console.log("event: ", event);

  if (event.httpMethod !== "OPTIONS" && event.httpMethod !== "POST") {
    console.log("event.httpMethod: ", event.httpMethod);
    return {
      statusCode: 405,
      headers: headers, // 这里也带上CORS头部，避免额外报错
      body: JSON.stringify({ message: "Method Not Allowed" }),
    };
  } else if (event.httpMethod === "OPTIONS") {
    return {
      statusCode: 204,
      headers: headers,
      body: null,
    };

  }
  if (event.httpMethod === "POST") {
    console.log("event.httpMethod: ", event.httpMethod);
    console.log("event.body: ", event.body);
    const data = JSON.parse(event.body);
    console.log("data: ", data);
    return {
      statusCode: 200,
      headers: headers,
      body: JSON.stringify({ message: "数据处理完成", receivedData: data })
    };
  }
};

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