使用Axios传递自定义请求头时触发CORS跨域报错如何解决

问题原因 #

本次报错属于典型的跨域资源共享(CORS)校验失败，核心原因如下：

• 前端页面运行在http://localhost:3000，接口服务部署在http://localhost:3001，二者端口不同属于跨域场景
• 请求携带了自定义请求头x-api-key，触发浏览器自动发送OPTIONS预检请求，后端返回的预检响应没有在Access-Control-Allow-Headers字段中放行自定义头，因此被浏览器拦截。
• 额外注意：你提供的示例代码存在语法错误，config对象声明后缺少闭合的}，需要先修复该问题再调试。

修复方案 #

方案1：后端配置CORS规则（正式环境推荐） #

在3001端口的后端服务中添加CORS配置，需要包含以下响应头规则：

• 配置Access-Control-Allow-Origin，值为http://localhost:3000（测试阶段可临时设为*，生产环境必须指定可信域名）
• 配置Access-Control-Allow-Methods，放行POST、OPTIONS请求方法
• 配置Access-Control-Allow-Headers，放行x-api-key、content-type、Accept请求头
• 针对OPTIONS类型的预检请求，直接返回200状态码即可，不需要处理业务逻辑

如果后端是Node.js + Express框架，可直接使用cors中间件快速配置，示例代码：

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: 'http://localhost:3000',
  allowedHeaders: ['x-api-key', 'Content-Type', 'Accept'],
  methods: ['POST', 'OPTIONS']
}));

方案2：前端配置本地开发代理（本地调试用） #

如果是用Vue/React等脚手架搭建的前端项目，可配置本地开发代理转发请求，规避跨域限制。以Vite为例，修改vite.config.js配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

配置完成后，将请求地址改为/api/user/Login即可，无需携带域名和端口。

方案3：临时禁用浏览器安全策略（仅调试用） #

如果只是临时测试功能，可以启动禁用CORS校验的Chrome窗口跳过检查，不建议用于日常开发和生产环境：

• Windows：关闭所有Chrome窗口，运行命令chrome.exe --user-data-dir="C://ChromeDevTemp" --disable-web-security
• Mac：关闭所有Chrome窗口，运行命令open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/你的用户名/ChromeDevTemp

另外补充：你当前请求的Content-Type设置为application/octet-stream，但请求体是JSON字符串，建议修改为application/json更符合HTTP规范，避免额外的解析问题。

内容的提问来源于stack exchange，提问作者Azer Ben Azzouz