前端开发|接口调试—ajax请求添加自定义header参数时报错的解决方法

🔍 前端开发 | 接口调试——ajax请求添加自定义header参数时报错的解决方法

🎬 场景引入

“小王，这个接口需要加个X-Auth-Token的header，你调一下！” 后端同事丢过来一句话。

小王自信满满地在Ajax请求里加了一行：

headers: { 'X-Auth-Token': '123456' }

结果浏览器无情报错：

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-auth-token is not allowed by Access-Control-Allow-Headers in preflight response.

😱 “什么鬼？我明明加了header，为什么被拦截了？！”

别急,这其实是前端开发中常见的CORS预检请求（Preflight）问题，今天我们就来彻底解决它！

🛠️ 问题原因

当浏览器发送跨域请求时,如果请求包含自定义header或非简单请求方法（如PUT、DELETE），浏览器会先发送一个OPTIONS预检请求，询问服务器是否允许这些操作。

报错的关键点：

1. 你的自定义header（如X-Auth-Token）没有被服务器明确允许。
2. 服务器没有正确响应OPTIONS请求，导致浏览器拦截了后续的真实请求。

💡 解决方法

方案1：后端配合——配置CORS响应头

后端需要在响应OPTIONS预检请求时，返回以下header：

Access-Control-Allow-Origin: http://localhost:3000  # 允许的源
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  # 允许的方法
Access-Control-Allow-Headers: X-Auth-Token, Content-Type  # 允许的自定义header

以Node.js（Express）为例：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'X-Auth-Token, Content-Type');
  next();
});

✅ 效果：预检请求通过后，浏览器会正常发送带X-Auth-Token的请求。

方案2：前端调整——避免触发预检请求

如果后端暂时无法修改,可以尝试：

1. 改用简单请求：

   • 只使用GET、POST方法
   • 只使用默认允许的header（如Accept、Content-Type等）

2. 将token放在URL参数或Body中（不推荐，安全性较低）：

// 放在URL参数
fetch('/api/data?token=123456');
// 或放在POST的body中
fetch('/api/data', {
  method: 'POST',
  body: JSON.stringify({ token: '123456' })
});

⚠️ 注意：这种方式可能不符合接口规范，仅作临时解决方案。

方案3：开发环境代理（本地调试用）

如果你用webpack-dev-server或vite，可以配置代理绕过浏览器CORS限制：

vite.config.js示例：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

✅ 效果：请求发送到本地服务器，由服务器转发，避免浏览器直接跨域。

🧠 知识扩展

1. 为什么会有CORS限制？

   浏览器出于安全考虑,默认禁止跨域请求，防止恶意网站窃取数据。

2. 哪些操作会触发预检请求？

   • 自定义header（如X-开头的字段）
   • Content-Type: application/json
   • PUT、DELETE等方法

3. 临时关闭浏览器CORS（仅限本地调试）

   • Chrome启动参数加--disable-web-security（⚠️ 不要用于日常浏览！）

最终建议：长远来看，一定要让后端正确配置CORS，这是最规范的做法！

🚀 现在你可以自信地对后端说：“老哥，加个Access-Control-Allow-Headers吧！”