WordPress（MAMP Pro）下带Authorization头的POST请求跨域问题排查

看起来你遇到的问题核心点很明确：Postman能正常调用API，但前端跨域请求带Bearer Token就失败，这种情况90%以上是跨域资源共享（CORS）配置问题——因为Postman不受浏览器同源策略限制，而前端页面在front-end.com、API在back-end.com属于跨域请求，浏览器会先发送OPTIONS预检请求，服务器必须正确响应才能让后续的POST请求正常执行。

下面是一步步的排查和解决方法：

1. 优先检查服务器的CORS配置（最关键） #

你的API部署在MAMP Pro的Apache上，需要确保服务器明确允许前端域名携带Authorization头访问：

• 打开WordPress根目录下的.htaccess文件（如果没有就新建一个），添加以下配置：

  # 允许指定前端域名跨域
  Header always set Access-Control-Allow-Origin "https://front-end.com"
  # 允许的请求方法
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
  # 允许的请求头（必须包含Authorization，因为Token存在这里）
  Header always set Access-Control-Allow-Headers "Authorization, Content-Type"
  # 开启凭证支持（兼容部分需要携带Cookie的场景，仅Token在头里也可开启）
  Header always set Access-Control-Allow-Credentials "true"
  
  # 处理浏览器的OPTIONS预检请求，直接返回200
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} OPTIONS
  RewriteRule ^(.*)$ $1 [R=200,L]
  

• 注意：不要用*代替https://front-end.com，当Access-Control-Allow-Credentials设为true时，浏览器不允许*作为允许的源，必须指定具体域名。
• 保存后重启MAMP Pro的Apache服务。

2. 确认前端请求的头设置正确 #

有时候问题出在前端代码的细节上：

• 确保Authorization头的格式正确（Bearer后面必须有一个空格），比如用fetch发送请求的示例：

  const myToken = '你的JWT令牌';
  fetch('https://back-end.com/api/your-target-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${myToken}` // 这里的空格不能省略！
    },
    body: JSON.stringify({ /* 你的请求参数 */ })
  })
  .then(res => res.json())
  .catch(err => console.error(err));
  

• 打开浏览器开发者工具（F12）的「Network」标签，查看POST请求的「Request Headers」，确认Authorization头确实存在且格式正确。

3. 检查WordPress安全插件的拦截 #

如果你的WordPress安装了安全类插件（比如Wordfence、iThemes Security），这些插件可能会默认拦截带有Authorization头的请求（因为WordPress原生REST API也用这个头，插件可能误判你的自定义API为恶意请求）：

• 暂时禁用所有安全插件，测试前端请求是否正常。
• 如果禁用后恢复正常，去插件设置里添加白名单：允许你的API路径（比如/api/users/*）和Authorization请求头。

4. 确保MAMP Pro启用了必要的Apache模块 #

配置CORS需要依赖mod_headers和mod_rewrite模块：

• 打开MAMP Pro，进入「Apache」设置页面，找到「Modules」列表。
• 确保mod_headers和mod_rewrite选项处于勾选状态，然后重启Apache服务。

5. 查看浏览器的错误提示定位问题 #

打开浏览器开发者工具（F12）：

• 查看「Console」标签里的跨域错误信息，浏览器会明确提示是哪个CORS规则不满足（比如Access-Control-Allow-Headers未包含Authorization）。
• 查看「Network」标签里的OPTIONS请求，如果响应状态码是403/404，说明服务器没有正确处理预检请求，回到第一步检查.htaccess配置。

总结一下：先从CORS配置入手，因为Postman能正常请求说明你的API逻辑本身没问题，跨域限制是前端请求失败的最常见原因。按照上面的步骤一步步排查，应该能解决问题。

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