IIS 网站文件夹中的 AngularJS/WebAPI 应用程序问题答案

【问题标题】：Issue with AngularJS/WebAPI application in IIS Website FolderIIS 网站文件夹中的 AngularJS/WebAPI 应用程序问题
【发布时间】：2014-10-24 05:01:04
【问题描述】：

这是我的问题。我在域的子文件夹中托管在 IIS 8 中的 Angular/WebAPI 项目。当我在文件夹名称后使用斜杠访问该站点时，一切正常。但是，如果我去掉尾部斜杠，当 Angular 为路由添加“#/”时，它就会中断。

Example: http://www.domain.com/folder/ becomes http://www.domain.com/folder/#/ <- OK
         http://www.domain.com/folder becomes http://www.domain.com/folder#/ < - Breaks

我开始使用的 AngularJS 模板没有这个问题。我不明白是什么导致了这个问题，也不知道如何处理。

项目的其他信息我正在使用 MVC Bundles 来最小化 javascript 和 css 我在同一个项目中有 WebAPI 控制器我在同一个项目中使用 Microsoft OWIN 进行身份验证除了这个初始 URL 问题之外，该项目运行正常。我无法在 Visual Studio 中重现此问题，但 VS 不在文件夹中运行。如果需要，我可以发布 Angular 路线。

【问题讨论】：

“中断”时发生了什么？
它加载初始 html 页面。但是在那个页面上，有角度指令中的 html 页面的相对链接。那些没有加载，可能是因为目录是“文件夹#/”而不是“文件夹/”。我需要弄清楚为什么要添加 #/ 而没有先在文件夹名称的末尾添加 /。
明确地说，尾随 / 由您的服务器处理。 #/ 由 angular 处理。从 Angular 的角度来看，您所描述的行为是正确的。您可能需要在 IIS 配置中设置某种类型的重写规则。我根本不了解 IIS，因此您需要深入研究它。这可能会有所帮助：ruslany.net/2009/04/10-url-rewriting-tips-and-tricks
嗨，卢克。我的回答解决了问题吗？如果没有，请告诉我。如果我的回答有帮助，您可以点赞并奖励答案吗？谢谢！

标签： angularjs iis

【解决方案1】：

这是关于相对路径在 HTML 中的工作方式的问题，而不是 Angular 特有的问题。这是在真正出现虚拟 URL 概念之前，URL 和相对链接的原始规范的结果。

HTML 页面上的相对链接与 HTML“文档”本身具有相同的基础。因此，如果 url 是：

http://domain.com/folder/

然后，您的浏览器将相对 URL 锚定在

http://domain.com/folder/[relativePathHere]

浏览器假定它正在查看该文件夹中的默认文档（index.html、home.htm 等）——最初是该目录中文件的索引。但是，如果没有尾部斜杠，浏览器会认为“/文件夹”实际上是一个名为“文件夹”的文件，它位于服务器的根 doc 目录中（因为它无法区分 - 它不在乎一种方式或其他是否有文件扩展名）。因此，所有相对路径都锚定在

http://domain.com/[relativePathHere]

这就是您在没有尾部斜杠的情况下遇到相对路径问题的原因。要更正此问题，您需要在 IIS 中设置一个重写规则。这样，在交付默认 HTML 文件之前，您将立即被重定向到带有斜杠的版本。这是一件很常见的事情（不仅仅是这种情况——它对 SEO 也很重要，这样爬虫就不会认为有两个不同的页面）。

查看以下链接中的提示 #1：http://ruslany.net/2009/04/10-url-rewriting-tips-and-tricks/

按照添加斜杠的说明进行操作，您应该已经设置好了。

【讨论】：