Angular 15+PHP路由：页面标题不更新问题排查

问题背景 #

已实现PHP读取Angular路由，每次请求时更新meta标签与页面标题。上传清理后的新构建包后，Chrome等浏览器页面标题不更新，但查看源码时meta标签和标题均显示正常，说明PHP通过curl获取的元信息已正确应用，需排查index.php无法更新页面标题的原因。

可能原因及排查步骤 #

• Angular客户端覆盖标题：Angular的Title服务或路由守卫可能在页面加载后动态修改标题，覆盖PHP渲染的初始值。检查Angular代码中是否存在以下逻辑：
  • 使用Title.setTitle()方法设置标题
  • 路由配置中设置data.title并通过路由守卫动态更新标题
• 浏览器/CDN缓存问题：index.php可能被浏览器或CDN缓存，导致新标题未生效。可通过强制刷新（Ctrl+F5）测试，同时确保服务器为index.php设置响应头：Cache-Control: no-cache, no-store, must-revalidate
• PHP变量容错缺失：部分路由下$meta['title']可能为空或未正确赋值，需添加容错处理：

  // 解析API响应后添加容错
  $metaTitle = isset($meta['title']) ? htmlspecialchars($meta['title']) : '默认标题';
  

• base标签影响：页面中的<base href="/">会让Angular接管路由切换后的标题更新，需确保Angular的标题更新逻辑与PHP渲染的初始值一致

提供的配置文件 #

.htaccess #

DirectoryIndex index.php index.html

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    # Serve files and directories directly if they exist
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Redirect all other requests to index.php
    RewriteRule ^ index.php [L]
</IfModule>

# Prevent directory listing
Options -Indexes

# Allow access to static assets
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

index.php #

<?php

$slug = strtok($_SERVER['REQUEST_URI'], '?');
$slug = rtrim($slug, '/');

// Make the API request using cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['slug' => $slug]));

$response = curl_exec($ch);
curl_close($ch);

// Parse the API response
$meta = json_decode($response, true);
$metaTitle = $meta['title'];
$metaDescription = $meta['description'];
$metaKeywords = $meta['keywords'];
$metaImage = $meta['main_image'];
$metaUrl = $meta['og_url'];
?>

<html lang="en">

<head>
  <title><?php echo htmlspecialchars($metaTitle); ?></title>
  <meta charset="UTF-8">
  <link rel="icon" type="image/png" href="./assets/icons/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg">
  <link rel="shortcut icon" href="./assets/icons/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png">

  <link rel="manifest" href="./assets/icons/site.webmanifest">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">

  <meta name="description" content="<?php echo htmlspecialchars($metaDescription); ?>">
  <meta name="keywords" content="<?php echo htmlspecialchars($metaKeywords); ?>">
  <link rel="canonical" href="<?php echo htmlspecialchars($metaUrl); ?>">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta property="og:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
  <meta property="og:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
  <meta property="og:url" content="<?php echo htmlspecialchars($metaUrl); ?>">
  <meta property="og:image" content="<?php echo htmlspecialchars($metaImage); ?>">
  <meta property="og:image:alt" content="<?php echo htmlspecialchars($metaTitle); ?>">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="675">
  <!--<meta property="og:image:type" content="image/webp" />-->
  <meta name="twitter:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
  <meta name="twitter:image" content="<?php echo htmlspecialchars($metaImage); ?>">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <base href="/">
  <link rel="stylesheet" href="styles.543ae2227a562180.css">
</head>

<body>
  <app-root></app-root>
  <script src="runtime.bf3051b90593455e.js" type="module"></script>
  <script src="polyfills.c88ce8d8e8ff1349.js" type="module"></script>
  <script src="scripts.91e58680bebedc85.js" defer></script>
  <script src="main.be934ab3482f7d6c.js" type="module"></script>
</body>
</html>

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