Chrome预检请求遭CORS拦截，Rest客户端却返回200的问题求助

问题核心 #

你遇到的是自定义请求头触发OPTIONS预检请求，但服务器返回的OPTIONS响应状态非200 OK导致的拦截。浏览器会在发送带自定义头（比如Authorization）的非简单请求前自动发起OPTIONS预检，而REST客户端/Postman这类工具不会触发该预检，所以能正常请求。

具体解决方法 #

1. 修正「Allow CORS」扩展的配置 #

多数情况扩展未生效是因为规则匹配错误，按以下步骤检查调整：

• 打开扩展选项，在自定义规则中添加目标域名规则：

  https://sign.zoho.com/*
  

• 开启「Allow Credentials」选项（Authorization头属于带凭证的请求，需开启此选项）
• 确认扩展在当前页面（http://localhost:3000）处于激活状态（点击地址栏右侧扩展图标查看）
• 尝试切换扩展的「Mode」（比如从「Normal」切换到「Wildcard」模式）

2. 正确配置本地代理（彻底解决预检问题） #

之前使用local-ssl-proxy未生效，大概率是未处理OPTIONS请求，推荐用适配React项目的http-proxy-middleware：

• 安装依赖：

  npm install http-proxy-middleware --save-dev
  

• 在项目根目录创建setupProxy.js文件：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'https://sign.zoho.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 保持请求路径不变
        },
        // 拦截OPTIONS预检请求，直接返回200响应
        onProxyReq: (proxyReq, req, res) => {
          if (req.method === 'OPTIONS') {
            res.status(200).end();
            return;
          }
        }
      })
    );
  };
  

• 修改你的fetch代码，请求代理地址：

  let response = await fetch("/api/v1/requests", {
      method: "GET",
      headers: {
        Authorization: "Zoho-oauthtoken <development token>",
      },
    })
  

• 重启React开发服务器，代理会自动生效，浏览器的OPTIONS请求会被代理拦截并返回200，规避CORS错误。

3. 调试预检请求定位问题 #

打开Chrome DevTools的「Network」面板，筛选「OPTIONS」请求，查看：

• 服务器返回的具体状态码（是否为404/403等非200状态）
• 响应头是否包含Access-Control-Allow-Origin、Access-Control-Allow-Headers（后者必须包含Authorization）
  如果服务器本身的OPTIONS响应存在问题，扩展可能无法完全覆盖，此时代理是更可靠的解决方案。

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