Linux服务器.htaccess配置指向React build文件夹遇403及JS语法错误求助

需求 #

在Linux服务器上通过.htaccess文件将所有请求重定向到存放React应用的build子文件夹。

初始配置与问题 #

初始.htaccess内容如下：

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{HTTPS} off
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteRule (.*) https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule . /build/index.html [L]
    
    RewriteCond %{HTTP_HOST}@@%{HTTP_REFERER} !^([^@]*)@@https?://\1/.*
    RewriteRule \.(gif|jpg|jpeg|png|tif|pdf|wav|wmv|wma|avi|mov|mp4|m4v|mp3|zip|js|ejs|csv|svg|css|json|env?)$ - [F]
</IfModule>
Options -Indexes

配置后网站出现403错误。

修改后的配置与新问题 #

调整后的.htaccess内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
 RewriteRule ^$ /build/ [L]

  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /build/index.html [L]
</IfModule>

现在可以正常加载index.html，元描述显示正常，但控制台抛出错误：

Uncaught SyntaxError: Unexpected token '<' (at main.876ac007.chunk.js:1:1)

问题原因与解决方案 #

错误原因 #

控制台的语法错误是因为静态资源（如JS、CSS文件）的请求被错误重定向到了build/index.html，浏览器把返回的HTML内容当成JS解析，自然会出现<符号的语法错误。

之前的配置中，%{REQUEST_FILENAME}检查的是服务器根目录下的文件是否存在，而React的静态资源都在build文件夹内，所以这些资源会被判定为“不存在”，进而被重定向到index.html。

正确的.htaccess配置 #

<IfModule mod_rewrite.c>
    RewriteEngine On

    # 可选：强制HTTPS和www前缀，按需开启
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # 根目录请求直接跳转到build文件夹
    RewriteRule ^$ /build/ [L]

    # 检查请求的资源是否在build目录下存在（文件或目录）
    RewriteCond %{DOCUMENT_ROOT}/build%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}/build%{REQUEST_URI} -d
    # 存在则重写路径到build下的对应资源
    RewriteRule ^(.*)$ /build/$1 [L]

    # 所有其他请求转发到build/index.html，处理React单页路由
    RewriteRule ^ /build/index.html [L]
</IfModule>
Options -Indexes

额外检查项 #

1. 权限设置：确保build目录及其所有文件的权限正确，服务器用户（如www-data）有读取权限：

   chmod 755 /path/to/your/project/build
   chmod 644 /path/to/your/project/build/*
   

2. 模块开启：确认服务器已启用mod_rewrite模块，可以通过a2enmod rewrite命令开启（Apache服务器）。

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