React项目中Axios发POST请求出现预检请求，如何仅发POST请求？

为啥会触发预检？ #

浏览器的同源策略规定，当你的POST请求属于非简单请求时，会先发送OPTIONS预检请求，确认服务器允许跨域后才会发正式的POST。你的请求里因为传的是JSON对象，Axios默认会把Content-Type设为application/json，这不符合简单请求的Content-Type要求（简单请求只允许application/x-www-form-urlencoded、multipart/form-data、text/plain），所以触发了预检。

两种解决办法 #

1. 把请求改成简单请求（前端改代码） #

把请求数据转成application/x-www-form-urlencoded格式，这样就不会触发预检。修改你的请求函数：

export async function onGetP(){
    // 把JSON参数转成form表单格式
    const formData = new URLSearchParams();
    formData.append('ApiKey', ApiKey);
    formData.append('Cust', ReactSession.get("Cust"));

    let data= await axios.post(`${Link}/getP`, formData, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(res => {
      const data = decrypt(res.data);
      const datajson = JSON.parse(data);
        return datajson;
    });
    return data
}

⚠️ 注意：这么改的前提是后端能解析application/x-www-form-urlencoded格式的数据，如果后端只认JSON，那这个方法不适用。

2. 后端配置预检缓存（更推荐） #

如果必须用JSON格式传数据，让后端在跨域配置里加个Access-Control-Max-Age头，指定预检请求的缓存时长（比如设成86400秒，也就是24小时）。这样浏览器在缓存有效期内，不会重复发OPTIONS，直接发POST。

同时后端得正确处理OPTIONS请求，返回这些响应头：

• Access-Control-Allow-Origin：设为你的前端域名（生产环境不建议用*）
• Access-Control-Allow-Methods: POST, OPTIONS
• Access-Control-Allow-Headers: Content-Type
• Access-Control-Max-Age: 86400

第一次请求会发预检，之后一天内的同类型请求都直接走POST。

提醒 #

别想着从前端直接禁用预检，这是浏览器的安全机制，根本绕不开。优先根据后端接收数据的格式选对应的解决办法。

内容的提问来源于stack exchange，提问作者gemma