刷新时在同一网站 404 上的 IIS 上部署 Angular 4 前端、.Net Web Api 后端答案

【问题标题】：Deploy Angular 4 front-end, .Net Web Api back-end on IIS upon same website 404 on refresh刷新时在同一网站 404 上的 IIS 上部署 Angular 4 前端、.Net Web Api 后端
【发布时间】：2020-02-15 08:11:12
【问题描述】：

我有一个由 Angular 4 前端客户端代码组成的 Web 应用程序，该代码调用用 ASP.NET WebAPi 编写的后端服务部分。我已经在同一个网站上的 IIS v10 上部署了我的 Web 应用程序，但是在刷新时我得到 404 not found 异常。

所以现在我在 IIS 中有一个网站，其中包含两个名为 wwwroot 的子目录，其中包含 Angular 生产代码和一个用于 WebApi 发布代码的 bin 文件夹。除非我按下浏览器的刷新按钮，否则该网站运行良好，出现 404 异常。我在互联网上找到了很多解决方案，但没有一个有效。我尝试安装 IIS 的 urlrewrite 组件，并将此重写规则添加到位于根文件夹中的 Web.config 文件中：

<rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

但我得到了这个错误： localhost/:1 资源解释为样式表，但使用 MIME 类型 text/html: "http://localhost:8084/styles.a41bc47d7e564e63171c.bundle.css" 传输。 inline.f6f68ecaf0de3791ceeb.bundle.js:1 Uncaught SyntaxError: Unexpected token '

【问题讨论】：

标签： angular iis asp.net-web-api angular-ui-router iis-express

【解决方案1】：

我遇到了完全相同的问题。我将 WebApi 和 Angular 应用程序文件放在 IIS 上的同一文件夹中因此，您需要解决的唯一问题是将 api 的 404 重定向到 Angular 入口点，在我的情况下是“/”，因为我在根文件夹中有 Index.html

在 web.config 中删除 rewrite 部分并将其添加到 system.webServer 下：

<system.webServer>

  <httpErrors errorMode="Custom" existingResponse="Auto">
   <clear />
   <error statusCode="404" path="/" responseMode="ExecuteURL" />
  </httpErrors>

这就像一个魅力。 Angular 路由会正确处理 url。

【讨论】：

【解决方案2】：

Uncaught SyntaxError: Unexpected token '<'

当他们没有处理请求的 css 和 js 文件并且服务器返回状态码 200 且没有错误时，会出现上述错误。但是返回的文件包含作为 HTML 文本的错误

因此，当您在上面的网络选项卡中检查 chrome 中的响应时，您会发现

<!DOCTYPE HTML PUBLIC ...>
   <html>
     ...
 Some html error in side this 
</body></html>

我们通过禁用 IPv6 检查策略解决了这个问题。

【讨论】：