Vue SSR 報警 The client-side rendered virtual DOM tree is not matching server-rendered con

接手前人留下來的 vue server side rendering 官網項目，訪問測服路徑時控制台報警

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

而官網的 SSR 渲染是根據進來的 hostname 是哪個而決定渲染哪個頁面。出了的這個問題意味着 SSR 服務端渲染的頁面內容，和前端客戶端渲染時頁面不一致。

我在 node render 的部分打印返回

const render = (req, res) => {
  // ......
  console.log('~~打印了～～～origin: ', origin, ' hostname: ' + req.hostname, ' host: ' + req.host)
  renderer.renderToString(context, (err, html) => {
    // ......
  })
}

訪問 mctalk-test.netease.im 得到的是

~~打印了～～～origin:  http://mctalk-test.netease.im  hostname: home.netease.im  host: home.netease.im

震驚，居然 origin 和 hostname 不一樣。肯定是 nginx 轉發過來的鍋了，我找到 nginx 配置

server {
  server_name home.netease.im mctalk-test.netease.im;

  listen 80;

  proxy_set_header X-Forwarded-For  $remote_addr;
  proxy_set_header X-Real-IP  $remote_addr;
  proxy_set_header X-Forwarded-Host $server_name;
  proxy_set_header Host $host;
  proxy_set_header X-Request-Host $host;


  location / {
    # ... 跳轉配置略
  }
}

繞了兩圈我才回過神，大概就是上文的 $host 變量出了問題搞得。

所以把 nginx 配置拆開就更解決了

server {
  server_name home.netease.im;

  listen 80;

  proxy_set_header X-Forwarded-For  $remote_addr;
  proxy_set_header X-Real-IP  $remote_addr;
  proxy_set_header X-Forwarded-Host $server_name;
  proxy_set_header Host $host;
  proxy_set_header X-Request-Host $host;


  location / {
    # ... 跳轉配置略
  }
}
server {
  server_name mctalk-test.netease.im;

  listen 80;

  proxy_set_header X-Forwarded-For  $remote_addr;
  proxy_set_header X-Real-IP  $remote_addr;
  proxy_set_header X-Forwarded-Host $server_name;
  proxy_set_header Host $host;
  proxy_set_header X-Request-Host $host;


  location / {
    # ... 跳轉配置略
  }
}

重啟 nginx 后再次訪問 mctalk-test.netease.im 得到的是

~~打印了～～～origin:  http://mctalk-test.netease.im  hostname: mctalk-test.netease.im  host: mctalk-test.netease.im

渲染也正確了。