添加自定义请求头时如何解决CORS报错问题？

核心问题分析 #

当请求中添加x-api-key这类自定义请求头时，浏览器会自动发送OPTIONS预请求，用来确认服务器是否允许该自定义头。你的错误提示明确说明预请求未返回HTTP OK状态，这意味着服务器没有正确处理OPTIONS请求，或者CORS头配置存在问题。

分场景解决方案 #

场景1：API服务器由你维护（可配置.htaccess）

替换当前的.htaccess配置为以下内容，确保正确处理OPTIONS预请求：

# 启用Rewrite引擎
RewriteEngine On

# 捕获OPTIONS请求，直接返回204 No Content（预请求要求的成功状态）
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=204,L]

# 全局设置CORS响应头
Header always set Access-Control-Allow-Origin "http://localhost:5500"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
# 明确允许自定义请求头x-api-key，避免通配符*的兼容性问题
Header always set Access-Control-Allow-Headers "x-api-key, Content-Type"
# 与你的AJAX配置保持一致，withCredentials设为false
Header always set Access-Control-Allow-Credentials "false"

额外检查项：

• 确保Apache服务器已启用mod_rewrite和mod_headers模块：
  • Linux系统执行sudo a2enmod rewrite headers，然后重启Apache服务。
  • Windows系统在httpd.conf中移除mod_rewrite.so和mod_headers.so前的注释，重启服务。

场景2：API为第三方服务（无法配置其服务器）

如果https://api.website.com/是第三方API，你本地的.htaccess配置完全不起作用——CORS规则由API服务器的响应头决定。这种情况下有两种可行方案：

• 更换认证方式：查看第三方API文档，是否支持将API key放在URL参数（如?api_key=xxx）或请求体中（仅适用于POST/PUT等请求），绕过自定义请求头的限制。
• 搭建本地代理：用Node.js或其他工具搭建简单代理服务器，前端请求本地代理地址，由代理转发请求到第三方API。示例代码（使用http-proxy-middleware）：

  const express = require('express');
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const app = express();
  
  app.use('/api', createProxyMiddleware({
    target: 'https://api.website.com/',
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res) => {
      // 向代理请求添加x-api-key头
      proxyReq.setHeader('x-api-key', 'Sd6g8uieEk8couufkxv9MVp5xdDJBcTSA');
    }
  }));
  
  app.listen(3000);
  

  之后前端AJAX请求改为http://localhost:3000/api/，即可绕过CORS限制。

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