Angular 4单页应用路由URL无法被Google Adwords、Mailchimp识别

我之前碰到过一模一样的问题，这其实是Angular单页应用（SPA）的客户端路由和第三方平台URL校验逻辑之间的冲突导致的，我来给你拆解下原因和解决办法：

问题根源 #

Angular的路由是客户端路由——也就是说，所有路由逻辑都是在浏览器里通过Router处理的，服务器本身只知道根路径/对应的index.html文件。而Google Adwords、Mailchimp这类服务在校验URL有效性时，会直接向服务器发送HTTP请求（比如请求http://tika.io/mink），如果你的服务器没有配置对应的路由处理，就会返回404 Not Found状态码，这些平台就会判定这个URL无效。

解决办法：配置服务器 fallback 到 index.html #

你需要修改服务器配置，让所有非静态资源的请求（比如/mink、/about这类路由路径）都返回Angular的index.html文件，这样既可以让Angular的Router接管路由渲染，也能让第三方平台校验时得到200 OK的状态码。

下面是几种常见服务器的配置方式：

Nginx 配置 #

在你的Nginx站点配置文件中，修改location /块：

location / {
  # 先尝试访问请求的文件/目录，不存在则返回index.html
  try_files $uri $uri/ /index.html;
}

Apache 配置 #

在项目根目录（或服务器站点根目录）创建/修改.htaccess文件：

RewriteEngine On
RewriteBase /
# 不重写index.html本身
RewriteRule ^index\.html$ - [L]
# 如果请求的不是文件或目录，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Node.js（Express）配置 #

使用connect-history-api-fallback中间件来处理路由 fallback：

1. 先安装依赖：

npm install connect-history-api-fallback --save

2. 修改Express启动文件：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 先加载history中间件，处理路由fallback
app.use(history());
// 托管Angular打包后的静态资源（通常在dist目录）
app.use(express.static(__dirname + '/dist'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

额外注意事项 #

• 配置完成后，先手动测试：在浏览器地址栏输入http://tika.io/mink，检查网络请求返回的状态码是否为200，同时页面能否正常渲染。
• 如果你的站点有后端API接口（比如/api路径），要确保这些接口不会被fallback规则影响——可以在服务器配置中单独为API路径设置规则，优先返回API响应，再处理Angular的路由。

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