React页面刷新404修复后出现CORS错误的解决求助

问题根源 #

添加的.htaccess重写规则会将所有非静态资源的请求导向index.html，这可能导致API请求被错误转发，或者CORS中间件未正确处理带自定义头的请求，从而触发跨域错误。之前正常是因为没有重写规则时，API请求直接到达后端，CORS配置能正常生效。

具体修复步骤 #

1. 修改.htaccess规则，排除API路径 #

在重写规则中添加排除API前缀的条件，避免API请求被转发到index.html：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  # 排除所有/api/开头的请求，直接转发到后端
  RewriteCond %{REQUEST_URI} !^/api/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

这条规则会让所有以/api/开头的请求绕过重写，直接到达你的Express后端，确保CORS校验正常进行。

2. 优化Express的CORS配置 #

默认的cors()配置可能不足以处理带Authorization头的请求，修改为更具体的配置：

// 替换原来的app.use(cors());
app.use(cors({
  origin: process.env.FRONTEND_URL, // 比如http://localhost:3000，和你的React应用地址一致
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization']
}));

• origin指定允许的前端域名，避免使用通配符（*）导致无法携带Authorization头；
• credentials: true允许请求携带凭证（如JWT令牌）；
• allowedHeaders明确列出你的请求中用到的自定义头，确保CORS校验通过。

3. 确认Axios的baseURL配置 #

检查API_BASE_URL是否指向正确的后端地址（比如http://localhost:5050），如果误设为前端地址，请求会被发送到前端服务器，自然触发CORS错误。

4. 排查请求状态 #

打开浏览器开发者工具的Network标签，查看API请求的详细信息：

• 如果请求被重定向到index.html，说明.htaccess的排除规则未生效，检查正则表达式是否正确；
• 如果请求直接返回CORS错误，确认后端CORS配置的origin是否和前端地址完全匹配（包括端口）。

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