添加请求头时遇HTTP 405错误：Axios自定义头引发预检响应异常

AI 小北

2026-5-21

解决Axios GET请求加自定义头触发405预飞错误的问题

这问题我之前踩过坑！核心原因是浏览器的跨域预飞请求（OPTIONS请求）被服务器拒绝了，而Postman这类客户端工具不受浏览器同源策略限制，不会触发预飞请求，所以能正常调用API。

为什么会出现这个错误？

当你在浏览器中发送带自定义头（比如Authorization）的GET请求时，浏览器会自动先发送一个OPTIONS预飞请求，用来询问服务器：「我能不能发送带这些头的GET请求？」如果服务器没有正确配置CORS（跨域资源共享）规则，不接受OPTIONS请求或者返回了405状态码，浏览器就会抛出你看到的错误。

而Postman直接发送GET请求，跳过了预飞步骤，所以不会触发这个问题。

具体解决方案

1. 后端配置是关键（必须做）

问题根源在服务器端，你需要让服务器正确处理OPTIONS预飞请求，并返回符合要求的CORS响应头。以下是几种常见后端的配置示例：

Node.js/Express 示例

如果用cors中间件，直接配置允许的头和方法：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 生产环境请指定具体域名，开发环境可临时用'*'
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Authorization', 'Content-Type']
}));

如果手动处理OPTIONS请求：

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  res.sendStatus(204); // 返回204表示无内容，符合预飞请求规范
});

Java/Spring Boot 示例

全局CORS配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://your-frontend-domain.com")
                .allowedMethods("GET", "POST", "OPTIONS")
                .allowedHeaders("Authorization", "Content-Type")
                .allowCredentials(true);
    }
}

Python/Flask 示例

使用flask-cors扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, 
     origins="https://your-frontend-domain.com", 
     methods=["GET", "POST", "OPTIONS"], 
     allow_headers=["Authorization", "Content-Type"]
)

2. 前端小检查（辅助排查）

确认Axios的头配置没有拼写错误，比如Authorization不要写成小写（虽然大部分服务器不区分大小写，但规范写法是首字母大写）：
```
axios.get('/api/your-endpoint', {
  headers: {
    'Authorization': 'Bearer your-token-string',
    'Content-Type': 'application/json'
  }
})
```
除非必要，尽量不要在GET请求里放敏感信息到URL参数（比如token），还是用请求头更安全。

总结

这个问题完全是跨域预飞请求的处理问题，和Axios本身关系不大。只要后端正确配置CORS，允许OPTIONS请求以及你需要的自定义头，就能解决所有浏览器里的405错误。

内容的提问来源于stack exchange，提问作者Mabeh Al-Zuq Yadeek