PHP+Vue项目Apache路由问题：重载404修复后出现CORS错误如何解决？

解决方案：区分前端路由与后端API的.htaccess配置 #

把你的.htaccess替换成以下内容，既解决前端路由重载404，又保证API请求能正确到达PHP后端：

RewriteEngine On

# 优先处理后端API请求：匹配你的所有API路由，转发到index.php
RewriteCond %{REQUEST_URI} ^/(products|create-product|mass-delete)$ [NC]
RewriteRule ^ index.php [L]

# 处理前端路由：如果请求的文件/目录/链接不存在，转发到Vue的index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

如果后续要新增API路由，只需要在RewriteCond的括号里添加新路径（用|分隔）即可。更优雅的方式是给所有API加统一前缀（比如/api），这样.htaccess可以简化为：

RewriteEngine On

# 所有/api开头的请求转发到PHP后端
RewriteRule ^api/ index.php [L]

# 其他非真实资源请求转发到Vue前端
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

对应的PHP路由也要同步修改前缀：

$router->get('/api/products', [$productController, 'getProducts']);
$router->post('/api/create-product', [$productController, 'createProduct']);
$router->post('/api/mass-delete', [$productController, 'deleteProducts']);

问题原因拆解 #

第一个.htaccess的问题

这个配置把所有非真实文件/目录的请求都转发到index.php，包括Vue的前端路由（比如/add-product）。但你的PHP路由只定义了API接口，没有处理这类前端路由，所以重载页面时，Apache把请求发给PHP，PHP返回404错误。

第二个.htaccess的问题

这个配置把所有非真实资源的请求都转发到index.html，包括你的API请求（比如/products）。这导致API请求根本没到达PHP后端，自然无法执行Headers::set()设置CORS响应头。浏览器收到的是Vue的HTML页面，而非预期的JSON响应，同时缺少CORS头，因此触发CORS错误。

额外注意事项 #

确保你的Headers::set()类正确设置了CORS相关头，比如：

class Headers {
    public static function set() {
        header("Access-Control-Allow-Origin: *"); // 生产环境建议指定具体域名
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Content-Type");
        // 处理OPTIONS预检请求
        if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
            exit(0);
        }
    }
}

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