Chrome扩展Manifest V3 POST请求失败求助：GET正常POST报错

核心问题分析 #

你遇到的情况是：Manifest V3的Chrome扩展能正常发送GET请求，但POST请求失败，而Postman/curl调用正常。这通常和扩展的安全策略、HTTP头格式错误或后端CORS预请求处理不完整有关，而非普通的CORS配置问题。

排查与修复步骤 #

1. 修正Content-Type头的格式错误 #

你的代码中Content-Type头包含多余空格：

"Content-Type": "application/json; charset = UTF-8"

HTTP头的参数格式不允许charset后加空格，这会导致服务器无法正确识别请求类型，进而触发CORS预请求失败。修改为：

"Content-Type": "application/json; charset=UTF-8"

2. 验证请求URL与host_permissions完全匹配 #

确认backendURL拼接后的完整请求URL，必须完全落在host_permissions的范围内：

• 如果后端使用了非标准HTTPS端口（如443以外），需要在host_permissions中添加端口通配：

  "host_permissions": [
    "https://example.com:*/*"
  ]
  

• 检查backendURL是否包含多余的路径前缀或拼写错误，确保和host_permissions的规则一致。

3. 查看Chrome DevTools的网络请求详情 #

右键扩展popup选择「检查」，打开DevTools的「网络」面板：

• 重点查看OPTIONS预请求的返回状态：如果OPTIONS请求返回4xx/5xx，说明后端或Nginx的CORS配置未正确处理预请求。
• 检查响应头是否包含：
  • Access-Control-Allow-Origin：需匹配扩展的源（或设为*，但生产环境建议指定具体域名）
  • Access-Control-Allow-Headers：必须包含Content-Type
  • Access-Control-Allow-Methods：必须包含POST

4. 完善Nginx的CORS配置 #

确保Nginx对OPTIONS请求返回正确的响应头，示例配置：

# 处理OPTIONS预请求
if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "https://example.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    add_header Access-Control-Max-Age 3600;
    return 204; # 无内容响应，符合预请求规范
}

# 处理非OPTIONS请求的CORS头
if ($request_method != OPTIONS) {
    add_header Access-Control-Allow-Origin "https://example.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}

注意：如果你的扩展在本地调试，Access-Control-Allow-Origin可以设为*，但正式环境建议严格指定域名。

5. 简化请求代码排除干扰 #

暂时移除chrome.tabs.query的包裹，直接发送请求，避免popup生命周期或tabs回调的潜在影响：

submitButtonProductCfg.addEventListener('click', async () => {
    const productName = document.getElementById("product-cfg-name").value;
    const link = backendURL + "/api/extension/v1/products/configs";
    const data = { name: productName };

    try {
        const response = await fetch(link, {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json; charset=UTF-8"
            }
        });

        if (response.ok) {
            alert("Success");
        } else {
            console.log('请求失败，状态码:', response.status);
            alert("Err");
        }
    } catch (error) {
        console.error('请求异常:', error);
        alert("Error " + error);
    }
});

总结 #

最可能的原因是Content-Type头的空格错误，或Nginx未正确处理OPTIONS预请求。按照上述步骤逐一排查，基本可以解决问题。

内容的提问来源于stack exchange，提问作者Bùi Minh Quang