具有Angular 路由的IIS重写规则

1bqhqjot  于 2022-11-24  发布在  Angular
关注(0)|答案(2)|浏览(182)

我正在构建一个混合了ASP.NETMVC和Angular1.x的应用程序。我使用MVC作为 shell ,然后在其上放置Angular。我这样做有几个原因。首先,它为我提供了为脚本引用创建HTML帮助器类以支持缓存破坏的能力。其次,它允许我将一组服务器端配置"推"到angular,以用于诸如Web服务URL之类的东西。所有这些似乎都工作正常,除了一个单一的问题。
目前,我不得不处理几个IIS重写规则,以使所有这些工作正常。在今天的测试中,我发布了一个到Facebook的链接,但它似乎不能正常工作,我真的不知道为什么。根据我对规则语法的理解,我认为它会工作,但没有。
下面是我目前在web.config中拥有的IIS重写规则,以及为什么我拥有每个规则:

<system.webServer>
    <rewrite xdt:Transform="Replace">
      <rules>
        <rule name="cachebust">
          <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
          <action type="Rewrite" url="{R:1}/{R:3}" />
        </rule>
        <rule name="baseindex" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
        <rule name="non-www" stopProcessing="true">
          <match url="(.*)" negate="false"></match>
          <conditions>
            <add input="{HTTP_HOST}" pattern="^exampledomain\.org$" negate="true"></add>
          </conditions>
          <action type="Redirect" url="http://exampledomain.org/{R:1}"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

1)"cachebust"规则用于脚本缓存破坏。我编写的HTML助手获取脚本文件的路径并在路径中插入一个假的版本号。例如,"scripts/example.js"将变为"scripts/v-123456789/example.js,"其中"123456789"是当前日期和时间的刻度。此规则会将URL重写回原始值,它会强制我的Angular 脚本在它们改变的情况下被浏览器重新加载。2这个规则看起来工作得很好。3这要归功于Mads:https://madskristensen.net/blog/cache-busting-in-aspnet/
2)"baseindex"规则用于重写URL,以便ASP.NET始终为用作我的站点的根目录的index.cshtml页面提供服务。该规则似乎也工作得很好。How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?
3) The "non-www" rule is the problematic one. The goal of the rule is to redirect all www requests to non-www requests based on ScottGu's blog post (link below) about canonical host names and how they affect SEO. This rule works perfectly fine for www.example.org as it redirects the URL to example.org, but it fails when the URL looks like this: www.example.org/entity/1 where entity is a detail page for id = 1. In practice, it fails for www.example.org/about too. Since my web services require CORS to be enabled as they are on separate domains, this also needs to happen for that. https://weblogs.asp.net/scottgu/tip-trick-fix-common-seo-problems-using-the-url-rewrite-extension
为完整起见:为Angular启用了HTML 5模式,我到指定页面的路由定义如下:

.state('entityDetail', {
                    url: '/entity/{id}',
                    templateUrl: 'app/pages/entity/entityDetail.html',
                    controller: 'entityDetailController',
                    controllerAs: 'entityDetailCtrl'
                })

此外,my_Layout. cshtml还包含以下文件的基本href:

<base href="/" />

和脚本引用(需要上面列出的cachebust规则的Angular 脚本除外):

<script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script>

我尝试过几种不同的规则,但它们都导致了不同的问题,因为这里有太多不同的东西在起作用,我担心我忽略了一些东西,或者我在思考这个"应该"如何运作时是错误的。
任何帮助都将不胜感激。

ecfsfe2w

ecfsfe2w1#

它采取了一些试验和错误,以找出这一切,但想张贴的答案,我终于想出了在事件中,有人曾经试图结合ASP.NET MVC和Angular 1.x在一起,同时允许缓存破坏在谷歌Chrome。
结果是有两件事:
1)规则的顺序。
2)stopProcessing标志及其启用时间。
In summary, to get this to work, I built the rules so that all requests must be redirected to www.exampledomain.com and then stop processing rules until the reprocessed request happens (this time www. will be guaranteed). Then, the cachebust rule must happen BEFORE the rewrite to the base index of "/", otherwise, the entire HTML document is returned by the server when each of the script files that must be "busted" load. This was really the majority of my issue from the very beginning. The whole process was honestly a little confusing so if this answer is not sufficient, please comment and I will try my best to better articulate the "whys" I found in my research. Hope this helps someone else though...it only took 10 days to figure out. :)

<system.webServer>
    <rewrite xdt:Transform="Replace">
      <rules>
        <rule name="forcewww" patternSyntax="ECMAScript" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAny">
            <add input="{HTTP_HOST}" pattern="^exampledomain.com$" />
          </conditions>
          <action type="Redirect" url="http://www.exampledomain.com/{R:0}" />
        </rule>
        <rule name="cachebust">
          <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
          <action type="Rewrite" url="{R:1}/{R:3}" />
        </rule>
        <rule name="baseindex">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
rur96b6h

rur96b6h2#

您可以在Program.cs文件中使用以下内容,而不是在app.config文件中编写重定向规则:

var builder = WebApplication.CreateBuilder(args); // Followed by service configurations...
var app = builder.Build(); // followed by app configurations...

// The following will fix your redirect woes:
app.UseStaticFiles();
app.MapFallbackToFile("index.html");

相关问题