CORS跨域问题：第三方工具可发application/json请求但本地调用失败

核心原理说明 #

Thunder Client、Reqbin等接口测试工具不属于浏览器运行环境，不受同源策略约束，不会自动发起CORS预检OPTIONS请求，因此只要接口本身业务逻辑正常就能拿到响应。而浏览器环境下的跨域请求只要触发预检条件（比如设置Content-Type: application/json），就会先校验服务端返回的CORS头，校验不通过就会抛出preflightmissingalloworiginheader错误。

可行解决路径 #

• 方案1：调整请求为简单请求绕过预检
  你可以修改请求配置，避免触发预检规则：将Content-Type设置为简单请求允许的text/plain类型，请求体仍保持原JSON字符串格式即可，绝大多数服务端接口都兼容解析纯文本传输的JSON内容。XMLHttpRequest示例代码如下：

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '目标接口地址');
  xhr.setRequestHeader('Content-Type', 'text/plain');
  xhr.send(JSON.stringify({"signature":"te20b"}));
  

• 方案2：本地开发配置代理转发
  开发阶段在前端构建工具中配置代理，由本地开发服务转发请求到目标接口，服务端之间的请求不受同源策略限制，不会触发CORS校验。以Vite为例，vite.config.js配置参考：

  export default {
    server: {
      proxy: {
        '/api': {
          target: '目标接口根域名',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
  

  配置后前端请求/api/接口路径即可正常拿到响应，Webpack、Rollup等其他构建工具也有对应的代理配置逻辑。
• 方案3：线上部署配置反向代理
  生产环境部署时，用Nginx、CDN等的反向代理能力，将前端静态资源和接口请求统一域名，匹配特定路径的请求转发到目标接口服务，从根源上消除跨域场景。Nginx配置参考：

  location /api/ {
    proxy_pass 目标接口根地址;
    proxy_set_header Host $host;
  }
  

• 方案4：通过CORS代理服务中转
  自行搭建一个简易的Node.js中转服务，或者使用公共CORS代理服务，所有接口请求先发给代理服务，由代理服务转发到目标接口并补充合法的CORS响应头后返回给前端，即可通过浏览器校验。

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