C前端模拟post请求增加header参数

浏览器里点开F12，前t请求增Network面板里那条红色的端模POST请求，十有八九是前t请求增跨域被拦了。前端模拟POST请求加header参数，端模核心就一句话：先过预检，前t请求增再谈业务。端模预检不过，前t请求增后面全是端模白搭。

我见过太多人栽在Authorization上。前t请求增后端要token，端模前端直接fetch一写：

fetch('/api/data',前t请求增 {  method: 'POST', headers: {  'Authorization': 'Bearer ' + token }, body: JSON.stringify({ name: 'test'}) })

然后控制台报错，红彤彤一片。端模问题不在你代码，前t请求增是端模浏览器先发了个OPTIONS请求试探，后端没搭理，前t请求增直接404或500，浏览器就判定这请求不安全，给拦了。你加的自定义header，比如X-Requested-With或者X-Custom-Token，都属于非简单请求，必须服务端配合。

那怎么模拟？分两种情况。

第一种，后端你能改。那最干净。后端CORS配置里加上允许的header，比如用Node的cors中间件：

app.use(cors({  allowedHeaders: ['Authorization', 'Content-Type', 'X-Custom-Token'] }))

前端照常发，浏览器预检通过，请求正常走。这种情况没啥好说的，纯粹后端配置问题。

第二种，后端你碰不到，或者只是本地调试。这时候别硬刚浏览器。用代理工具，比如Charles、Fiddler，或者前端脚手架里的devServer代理。拿webpack举例，devServer里配个proxy：

devServer: {  proxy: {  '/api': {  target: 'http://real-server.com', changeOrigin: true, onProxyReq: (proxyReq, req, res) => {  proxyReq.setHeader('Authorization', 'Bearer ' + req.headers['x-temp-token']) } } } }

这样浏览器发的请求不带自定义header，代理层偷偷加上去，绕过跨域限制。实际开发里我常用这招，省得跟后端扯皮。

但有个坑，onProxyReq里拿到的req.headers是原始请求的，如果你前端本来就没传那个token，你从哪拿？所以前端得先把token放在一个浏览器允许的header里，比如X-Temp-Token，代理层读出来再转成Authorization。麻烦是麻烦点，但能跑通。

还有一种野路子，直接禁用浏览器安全策略。Chrome启动加参数--disable-web-security --user-data-dir=某个临时目录。这招只适合本地快速验证，别拿它糊弄测试环境。我见过有人把这参数写进启动脚本，后来忘了删，整个团队都在用禁了安全策略的浏览器测东西，后端接口裸奔了俩月。别学。

说回header本身。模拟POST请求加header，最常见的场景是加Content-Type。默认的text/plain;charset=UTF-8后端解析不了，你得显式设成application/json。但注意，一旦你设了application/json，这请求就变成非简单请求了，预检又来了。所以很多老手干脆用text/plain传JSON字符串，后端自己解析。丑是丑，但省了预检的麻烦。

我自己写调试工具时，更倾向用axios。它底层是XHR，但封装了拦截器。你可以在请求拦截器里统一加header：

axios.interceptors.request.use(config => {  config.headers['X-Debug-Token'] = localStorage.getItem('debug-token') return config })

但axios在浏览器里照样受CORS限制，拦截器只是方便你加，能不能发出去还得看预检。所以别把axios当万能药。

最后提一嘴，模拟POST请求加header，别忘了一个细节：header参数名别用下划线。有些网关或者代理服务器会吞掉带下划线的header，比如X_User_ID，折腾半天以为是跨域问题，结果是Nginx默认忽略带下划线的header。改成X-User-Id，立马通了。这坑我踩过一次，排查了三个小时，最后在Nginx配置里加了underscores_in_headers on;才解决。后来我写代码，凡自定义header一律用连字符，绝不碰下划线。

模拟POST请求加header参数，说到底就是跟浏览器的安全策略博弈。要么让后端放行，要么自己代理绕行，要么干脆走非浏览器环境。Node里用axios或者node-fetch，啥header都能加，没有CORS的破事。但前端模拟，就得认命，按规矩来。