原生JS发送HTTP POST请求被CORS策略拦截问题求助

Postman 作为接口调试工具不受浏览器同源策略约束，所以可以正常请求成功。你在浏览器环境用 XMLHttpRequest 发请求时触发 CORS 拦截的核心原因有两个：

• 你当前是直接双击打开本地 HTML 文件发起请求，请求源显示为 null
• 你的请求携带了 Content-Type 请求头，浏览器会自动先发送一个 OPTIONS 方法的预检请求，你的 Node.js 服务没有在预检响应的 Access-Control-Allow-Headers 中声明允许 Content-Type 头，所以被浏览器直接拦截。

方案1：修改 Node.js 服务配置（推荐，根治问题） #

CORS 拦截本质是浏览器的安全机制，是否放行由服务端响应头控制，配置好对应响应头即可正常请求，适合长期使用。

• 如果你用原生 Node.js http 模块搭建服务，在所有业务逻辑前加入 CORS 头处理，同时单独响应 OPTIONS 预检请求：

const http = require('http');
const server = http.createServer((req, res) => {
  // 调试阶段可以设为*允许所有来源访问，上线可替换为你自己的前端域名
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 允许的请求方法，按需加你用到的PUT、DELETE之类的
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 必须把Content-Type加到允许的请求头里，对应你报错里缺失的配置
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 预检请求直接返回200，不执行业务逻辑
  if (req.method === 'OPTIONS') {
    res.statusCode = 200;
    res.end();
    return;
  }

  // 你原来的业务处理代码
  // ...
})
server.listen(你的服务端口);

• 如果你用 Express 框架开发，直接用 cors 中间件即可，不用手动写头：
  1. 安装依赖：npm install cors
  2. 在所有路由前挂载中间件：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  app.use(cors()); // 这行加在所有路由定义前面
  // 后续写你的业务接口路由
  

方案2：本地临时调试方案（仅自己测试用，禁止用于生产环境） #

如果你暂时没法修改服务端配置，仅本地调试可以临时绕过浏览器CORS校验：

• 关闭浏览器安全模式启动：比如Chrome浏览器，右键快捷方式选择「属性」，在「目标」输入框的原有内容末尾加上 --disable-web-security --user-data-dir=C:\temp\chrome-dev-data（后面的路径是你本地随便建的一个空文件夹就行），用这个修改后的快捷方式启动浏览器，会临时关闭同源策略校验，只适合开发调试用，不要用这个模式日常浏览网页。
• 不要直接双击打开本地HTML文件（会导致origin为null），可以在前端文件目录执行npx http-server起一个本地静态服务，通过http://localhost:端口访问你的前端页面，减少额外的跨域限制。

额外提个小技巧：你现在的请求参数是直接拼在URL里的GET请求，如果没特殊需求，把XHR里手动设置的Content-Type头删掉就行，这类简单GET请求不会触发OPTIONS预检，也能绕开当前报错，但还是建议优先配好服务端CORS，一劳永逸。

内容的提问来源于stack exchange，提问作者Filippo Andrea Sighinolfi