Apache部署Angular项目OAuth2重定向问题求助

看起来你遇到的是Angular HTML5路由在Apache上的典型适配问题，结合OAuth2的redirect_uri限制，我们一步步拆解解决：

为什么useHash: true方案行不通？ #

OAuth2服务普遍不接受带#的redirect_uri——因为哈希部分是浏览器端专属的内容，不会被发送到服务器，所以OAuth服务验证时会直接判定为无效请求。这个方案确实不适合你的场景，我们需要用HTML5模式路由配合正确的Apache配置。

为什么添加Rewrite规则后出现Unexpected token <？ #

这个错误的核心原因是Apache把静态资源（JS/CSS等）的请求也重定向到了index.html，导致浏览器拿到的是HTML内容而非预期的JS文件，解析时自然会抛出语法错误。通常是以下两个原因导致：

1. Angular打包时的base href配置错误，导致静态资源路径指向异常
2. Apache的DocumentRoot或目录配置不正确，服务器找不到静态资源，触发了重写规则

正确的解决方案步骤 #

1. 确保Angular打包配置正确的base href #

如果你的应用部署在域名根目录（比如http://www.ofi-demo.com/），打包时执行：

ng build --prod --base-href /

如果部署在子目录（比如http://www.ofi-demo.com/app/），则对应调整：

ng build --prod --base-href /app/

打包完成后，把dist文件夹下的所有文件（不是dist文件夹本身）复制到Apache的/var/www/demo/public_html目录下，确保index.html、各类*.js、*.css文件直接在该目录下。

2. 修正Apache虚拟主机配置 #

调整配置，确保静态资源能被正确识别，同时HTML5路由正常工作：

<VirtualHost *:80>
    ServerName www.ofi-demo.com
    ServerAlias ofi-demo.com
    DocumentRoot /var/www/demo/public_html

    <Directory /var/www/demo/public_html>
        # 禁止目录索引，允许符号链接
        Options -Indexes +FollowSymLinks
        # 允许使用.htoverride（按需开启）
        AllowOverride All
        RewriteEngine On

        # 规则1：如果请求的文件或目录真实存在，直接返回，不执行重写
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # 规则2：所有其他请求转发到index.html，交给Angular路由处理
        RewriteRule ^ /index.html [L]
    </Directory>
</VirtualHost>

3. 验证OAuth2的redirect_uri配置 #

在你的OAuth2服务后台，将回调地址设置为不带哈希的路径，比如：

http://www.ofi-demo.com/authentication/token

这样认证完成后，OAuth服务重定向回这个地址时，Apache会将请求转发到index.html，Angular的路由就能正确捕获该路径并处理令牌逻辑。

4. 测试验证 #

1. 重启Apache服务：sudo systemctl restart apache2
2. 访问应用并尝试OAuth2认证流程，确认重定向后能正常加载应用并处理令牌
3. 打开Chrome开发者工具的Network面板，检查所有JS/CSS文件的返回状态码是否为200，确保没有被错误重定向到index.html

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