Angular 9忽略指定路由跳转至外部应用及服务器配置咨询

这个需求其实很常见——让Angular应用和独立CMS共享域名下的路径，核心思路就是让Web服务器优先接管/blog开头的所有请求，直接转发到你的CMS应用，完全不让这些请求到达Angular的路由系统。下面针对你考虑的IIS和Apache分别给出具体配置方案：

IIS 配置方案 #

首先确保你已经安装了IIS的URL重写模块（这是处理路由转发的核心组件，可通过Web平台安装器安装）。然后修改Angular部署目录下的web.config文件，添加以下规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 规则1：优先处理/blog路径，转发到CMS -->
        <rule name="Forward Blog to CMS" stopProcessing="true">
          <match url="^blog/(.*)" />
          <!-- 替换成你的CMS实际地址：
               - 如果CMS是独立站点（如http://blog.yourdomain.com），用下面的配置
               - 如果是同服务器的虚拟目录（如IIS中创建了名为blog-cms的虚拟目录），则改为 url="/blog-cms/{R:1}"
          -->
          <action type="Rewrite" url="http://your-cms-domain/{R:1}" />
          <!-- 如果希望浏览器地址栏跳转到CMS地址，把type改成"Redirect"即可 -->
        </rule>

        <!-- 规则2：剩余请求交给Angular路由处理（这是Angular部署的常规配置） -->
        <rule name="Angular Routes" 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

关键注意点：

• stopProcessing="true"必须加上，这样匹配到/blog的请求就不会再执行后续的Angular路由规则了。
• 如果使用虚拟目录部署CMS，需要确保虚拟目录的权限配置正确，并且可以正常访问。

Apache 配置方案 #

Apache需要启用mod_rewrite和mod_proxy模块（如果需要反向代理到外部CMS站点的话）。然后在Angular部署目录的.htaccess文件中添加以下配置：

# 开启重写引擎
RewriteEngine On

# 规则1：转发所有/blog开头的请求到CMS
# 替换成你的CMS实际地址：
# - 外部站点：http://your-cms-domain/$1 [L,P]（[P]表示启用代理）
# - 同服务器虚拟目录：/blog-cms/$1 [L]
RewriteRule ^blog/(.*)$ http://your-cms-domain/$1 [L,P]
# 如果希望地址栏跳转，添加[R=302]，比如：[L,P,R=302]

# 规则2：Angular路由的常规配置
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

关键注意点：

• [L]标记表示这是最后一条匹配的规则，避免后续规则干扰。
• 如果代理到外部站点，必须确保Apache的mod_proxy和mod_proxy_http模块已启用。

额外说明 #

• Angular端不需要做任何路由配置：不用在app-routing.module.ts中添加/blog相关的路由，因为服务器已经把这些请求拦截了，根本不会到达Angular应用。
• 两种转发模式选择：
  • 重写（Rewrite）：浏览器地址栏保持yourdomain.com/blog/xxx，用户感知不到后台的CMS存在，实现无缝集成。
  • 重定向（Redirect）：浏览器地址栏会跳转到CMS的实际地址（如blog.yourdomain.com/xxx），适合需要明确区分站点的场景。

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