Ubuntu 22.04中Vue与Laravel API虚拟主机.htaccess规则冲突问题

问题背景 #

前端基于Vue2部署在vue.mydomain.com，后端Laravel9 API部署在api.mydomain.com，配置了独立Apache虚拟主机。调用API路由时，请求会从api.mydomain.com被重定向至vue.mydomain.com，移除Vue虚拟主机的.htaccess后API恢复正常。

问题根源 #

API虚拟主机的.htaccess中存在强制重定向规则，将所有api.mydomain.com的请求跳转到vue.mydomain.com，这是导致API请求被拦截的核心原因。同时Vue的.htaccess需要确保仅作用于自身子域名，避免干扰API路由。

1. 修改API虚拟主机的.htaccess（位于/public目录） #

移除强制重定向到Vue子域名的规则，保留Laravel必要的重写逻辑即可。修改后的代码如下：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

说明：删除了原规则中RewriteCond %{HTTP_HOST} ^api\.mydomain\.com [NC]和对应的RewriteRule ^(.*) https://vue.mydomain.com/$1 [L,R=301]，API请求将正常进入Laravel路由处理，uploads目录下的静态文件也能通过api.mydomain.com/uploads/...正常访问。

2. 调整Vue虚拟主机的.htaccess #

确保所有重写规则仅作用于vue.mydomain.com子域名，避免影响API请求：

RewriteEngine On
RewriteBase /

# 仅对vue.mydomain.com的请求生效
RewriteCond %{HTTP_HOST} ^vue\.mydomain\.com$ [NC]

# 修复多斜杠路径问题
RewriteCond %{THE_REQUEST} ^[A-Z]+\s//+(.*)\sHTTP/[0-9.]+$ [OR]
RewriteCond %{THE_REQUEST} ^[A-Z]+\s(.*/)/+\sHTTP/[0-9.]+$
RewriteRule .* http://%{HTTP_HOST}/%1 [R=301,L]

# 存在的文件/目录直接返回
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

# Vue单页应用路由重写
RewriteCond %{REQUEST_URI}::$1 ^(/.+)(.+)::$ 
RewriteRule ^(.*)$ - [E=BASE:%1]
RewriteRule ^(.*)$ %{ENV:BASE}index.html [NC,L]

# 禁用目录浏览
Options -Indexes

说明：在规则顶部添加RewriteCond %{HTTP_HOST} ^vue\.mydomain\.com$ [NC]，确保所有重写逻辑只对前端子域名生效，API子域名的请求不会触发这些规则。

3. 验证虚拟主机配置 #

当前Apache虚拟主机配置已正确分离两个子域名，只需确认：

• 两个虚拟主机文件已通过a2ensite命令启用
• 重启Apache服务使配置生效：sudo systemctl restart apache2

完成以上修改后，API请求可正常通过api.mydomain.com/api/...访问，前端路由正常工作，uploads目录的静态文件依然可通过api.mydomain.com/uploads/...访问。

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