我有一个有Angular 的应用程序,有几条路线,例如:
site.com/
site.com/page
site.com/page/4
使用angular的html5路由模式,当你点击应用程序中的链接时,这些错误可以正确解析,但是当你进行硬刷新时,当然会出现404错误。
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} !OPTIONS
RewriteRule ^(.*)$ index.html [L]
这适用于Angular 请求,但是当我试图加载脚本或在我的域中进行 AJAX 调用时,例如:
<script src="/app/programs/script.js"></script>
这个脚本没有加载-它的请求被重定向,它试图加载index.html页面,因为.htaccess认为它应该重新路由请求-不知道这个文件确实存在,它应该加载这个文件而不是重定向。
有没有什么方法可以让htaccess只在没有实际的文件可以解析的情况下,才将请求重定向到index.html(使用视图参数)?
8条答案
按热度按时间92dk7w1h1#
使用类似以下的代码片段:
这将跳到实际资源(如果有),并跳到
index.html
(对于所有AngularJS路由)。bvjveswy2#
如果应用程序请求了
directive
模板文件,但文件缺失,则会出现问题。在某些情况下,这会导致应用程序在index.html
中请求多个脚本文件。如果文件不存在,我们应该发送
404
响应而不是index.html
文件。因此,我添加了简单的正则表达式模式来识别丢失的文件请求。zphenhs43#
一个穷人的解决方案(不使用mod_rewrite):
4szc88ey4#
在我的情况下,我创建.htaccess文件如下所示
刚刚在/index. html之前添加了.,并将该文件添加到我的域(如https://example.com/subfolder)中,它运行良好
3pvhb19x5#
请查看此链接:https://stackoverflow.com/a/49455101/5899936在根文件夹中创建
.htaccess
文件,并将其粘贴到.htaccess
1aaf6o9v6#
我将提供另一个详细的htaccess文件,以防您需要:
下面是我的htaccess,非常接近,但更具体:
h79rfbju7#
julianpoemp.github.io/ngx-htaccess-generator/上有一个很棒的 “Angular
.htaccess
发电机”。该生成器是开源的(源代码可以在github.com/julianpoemp/ngx-htaccess-generator上找到)。
默认情况下,生成的
.htaccess
如下所示,对我来说很好用:使用Angular
13.0.3
成功测试。tzdcorbm8#
在我的例子中,我们需要一个更多的功能达到
.htaccess
配置,如:Authorization
标头转换为HTTP_AUTHORIZATION
环境变量。**注意:**我们使用
[L]
而不是[L,R=301]
,因为后者会导致浏览器永久缓存重定向(即使某一天该路由是一个文件,它仍然会被重定向)。