如何禁用带自定义请求头的Preflight请求？求资深技术指导

我太懂这种烦恼了——每次进入页面要加载3-4个API数据，结果浏览器先挨个发OPTIONS预检请求，不仅多了一倍的网络请求量，还拖慢了页面数据的渲染速度。下面给你几个经过实践验证的解决方案，帮你高效处理这个问题：

1. 让请求符合「简单请求」规则，彻底避免预检 #

浏览器对符合特定条件的请求不会触发预检，你可以调整请求参数来适配这些规则：

• 请求方法仅限 GET、HEAD、POST 三者之一
• 请求头只能包含：Accept、Accept-Language、Content-Language、Content-Type（且Content-Type只能是application/x-www-form-urlencoded、multipart/form-data、text/plain）
• 没有自定义的请求头（比如Authorization之外的自定义头）

如果你的API请求能满足这些条件，就能直接跳过预检。比如如果之前用application/json传参，在数据结构不复杂的场景下，可以改用x-www-form-urlencoded格式；如果必须用JSON，那看下面的方案。

2. 配置预检请求缓存，减少重复预检 #

通过后端设置Access-Control-Max-Age响应头，让浏览器缓存预检请求的结果，在缓存有效期内不会重复发送。比如设置24小时的缓存：

以Node.js/Express为例，配置CORS时添加：

const cors = require('cors');
app.use(cors({
  origin: 'https://你的前端域名.com',
  maxAge: 86400 // 缓存24小时，单位为秒
}));

注意：不同浏览器对这个值的上限有不同限制（比如Chrome默认最大缓存10分钟），但你可以设置到浏览器允许的最大值，大幅减少预检请求的频率。

3. 合并API请求，减少总请求数 #

既然页面需要3-4个接口的数据，不如让后端提供一个聚合接口，一次性返回所有页面需要的信息。这样不仅把预检请求的数量从4次降到1次，还减少了总的网络请求开销，同时前端也不用处理多个请求的异步逻辑（比如Promise.all的状态管理）。

这个方案对SPA特别友好，比如你的页面需要用户信息、商品列表、推荐内容，后端可以写一个/api/page-data接口，把这三类数据打包返回，前端一次请求搞定。

4. 使用代理消除跨域，从根源上避免预检 #

如果前端和后端部署在同一个域名下，或者用反向代理把前端的API请求转发到后端，浏览器会认为是同域请求，不会触发CORS预检：

• 开发阶段：在Vue项目的vue.config.js里配置devServer代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://你的后端API地址',
        changeOrigin: true
      }
    }
  }
};

• 生产阶段：用Nginx做反向代理，配置示例：

server {
  listen 80;
  server_name 你的前端域名.com;

  location /api {
    proxy_pass http://你的后端API地址;
    proxy_set_header Host $host;
  }

  location / {
    root /path/to/your/vue/dist;
    try_files $uri $uri/ /index.html;
  }
}

额外注意点 #

• Access-Control-Max-Age的缓存是基于请求方法、请求头、域名的组合，如果你有多个不同自定义头的请求，还是会触发各自的预检。
• 聚合接口要注意避免过度耦合，如果后续页面需求拆分，要保证接口的可维护性。

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