第三方API集成：预检OPTIONS请求401引发CORS报错排查

判断确认 #

你的判断完全正确：

• 由于请求携带了自定义的key请求头，浏览器会触发CORS预检请求（OPTIONS）——这是浏览器的安全机制，用于验证服务器是否允许跨域请求。
• 预检请求不会携带自定义请求头（包括你的key认证头），第三方API因缺少认证信息返回401，导致预检失败，浏览器直接拦截后续的实际POST请求，抛出CORS错误。

可自行修复的方案 #

1. 本地开发代理（推荐） #

通过本地代理转发请求，让浏览器认为请求是同域的，从而避免触发CORS预检：

• 若使用React/Vue等框架的开发服务器，可直接配置代理：
  • React（Create React App）：在package.json中添加：

    "proxy": "https://192.168.1.92"
    

    之后修改axios请求地址为/area，代理会自动转发到目标API。
  • Vue（Vue CLI）：在vue.config.js中配置：

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'https://192.168.1.92',
            pathRewrite: { '^/api': '' },
            changeOrigin: true
          }
        }
      }
    }
    

    修改axios请求地址为/api/area即可。
• 也可使用Nginx做本地代理，配置示例：

  server {
    listen 8080;
    location / {
      proxy_pass https://192.168.1.92;
      proxy_set_header Host $host;
      proxy_set_header key "1-e6c459512a6118bba516cb8ee6831f81ba55b96e";
    }
  }
  

  浏览器请求http://localhost:8080/area时，Nginx会自动添加key头并转发到目标API。

2. 浏览器临时禁用CORS（仅开发调试用） #

• Chrome：可安装Allow CORS: Access-Control-Allow-Origin类插件，或启动Chrome时添加参数：

  chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

• Firefox：在about:config中设置security.fileuri.strict_origin_policy为false，或安装CORS相关插件。
  注意：该方法仅适合本地开发调试，严禁用于生产环境。

3. 调整认证信息传递方式（若API支持） #

如果API允许将认证信息放在URL参数或请求体中，而非自定义头，可修改axios请求：

// 放在URL参数中
axios.post(`${BASE_URL}/area?key=1-e6c459512a6118bba516cb8ee6831f81ba55b96e`, body)

// 或者放在请求体中
axios.post(`${BASE_URL}/area`, { ...body, key: "1-e6c459512a6118bba516cb8ee6831f81ba55b96e" })

这种方式不会触发预检（无自定义头），可直接发送POST请求。

后续建议 #

若上述自行修复方案无法满足需求，再联系API厂商，要求他们调整CORS配置：

• 允许来自http://localhost:3000的跨域请求
• 对OPTIONS预检请求放行，无需校验key头，返回200/204状态码

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