配置http-proxy-middleware后，Axios请求Express仍触发OPTIONS预请求？

安全阿岳

2026-8-4

React调用Express后端仍触发OPTIONS预请求的原因与解决办法

为什么会触发OPTIONS预请求？

浏览器的同源策略规定，只有简单请求才会跳过OPTIONS预校验，你的请求不符合简单请求的判定条件，所以浏览器自动发起OPTIONS：

你在Axios请求头中添加了Access-Control-Allow-Origin: *，这个是服务端返回给客户端的响应头，客户端请求时携带它属于自定义请求头，直接触发预请求；
请求的Content-Type为application/json，不在简单请求允许的Content-Type范围内（仅允许application/x-www-form-urlencoded、multipart/form-data、text/plain），这也会触发预请求；
若Axios的BASE_URL直接写http://localhost:8000而非/api，则代理配置未生效，请求仍为跨域请求，必然触发OPTIONS。

你的配置问题

Axios实例的headers中无需设置Access-Control-Allow-Origin，该头由服务端返回，客户端携带属于冗余操作，还会触发预请求；
若BASE_URL未设为/api，代理未生效，跨域问题持续存在。

如何避免OPTIONS预请求？

分两种场景处理：

场景1：可改为简单请求

移除Axios配置中的Access-Control-Allow-Origin请求头；
将Content-Type改为application/x-www-form-urlencoded，同时用qs.stringify()处理请求体（需先安装qs包）；
确保Axios的BASE_URL为/api，让代理生效，此时请求被转发到后端，不存在跨域，浏览器不会发起OPTIONS。

修改后的Axios示例：

const qs = require('qs');
const options = {
    baseURL: '/api', // 确保是/api而非直接后端地址
    timeout: 300000,
    withCredentials: false,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    transformRequest: [function (data) {
        return qs.stringify(data);
    }],
};
const axiosInstance = axios.create(options);