踩坑：VuePress与Cloudflare Pages的奇妙冲突

# 起因

前两天用VuePress把博客从Hexo迁移了过来，部署在了Cloudflare Pages上。然后想自测一下各种功能，发现基于giscus的评论系统无法使用。于是开始排查

giscus评论区永远显示“使用GitHub登陆”。点击登陆后跳转，回到本页面后依然显示“使用GitHub登陆”。可以认为可能的原因是登陆没有成功

去网上搜索giscus的问题。发现评论区有类似的无法登陆问题，比如

其中作者提到了，成功登陆后，giscus会使用在url后带上?giscus的方式将token回传到原url中，供原网页中的giscus js程序调用。

但我用F12查看我网页的重定向过程，以https://www.oneearmouse.com/posts/VuePress-Migrate.html这个url为例。发现最后一次跳转的url为

1

https://www.oneearmouse.com/posts/VuePress-Migrate?giscus=xxxxxxx

理论上这个跳转应该没问题？

我又尝试直接在本地调试，在localhost中尝试。结果能成功跳转。成功跳转到了

1

http://localhost:8080/posts/VuePress-Migrate.html?giscus=xxxxxxx

并且最神秘的事情发生了。本地在调用这个url后，giscus登陆能用了，并且能够成功发送评论。

因此，现在网页中的跳转符合giscus跳转的规范，并且能够在本地成功进行评论，应该不是giscus的问题

我用的主题是vuepress theme hope。但是到google和github对应的issue区里找了一下。使用评论插件的好像也没有这个问题。并且刚才在排查giscus的时候，已经能带上token跳转了，应该不是VuePress的问题。

综合现在的情况：

所以问题发生的位置大概率还是在于用于生产环境部署的Cloudflare Pages上。

在google上搜索"cloudflare page + giscus"的关键词，并没有发现相关内容。但经过多次搜索，发现了一个可能的问题点，参见不支持-html-后缀

简而言之，Cloudflare Pages会将所有的.html后缀重定向或省略。比如

1

https://www.oneearmouse.com/posts/VuePress-Migrate.html

会自动经历一次重定向，变为

1

https://www.oneearmouse.com/posts/VuePress-Migrate

那么，这到底为什么会导致giscus登陆不了？

我去找了几个VuePress的例子网站，比如

这些网站的使用的默认路由系统，会将一篇博客文章映射为xxx.com/xxx/xxx.html的格式。我使用的正是VuePress Theme Hope主题，所以目前我的网站也是使用这种路径系统

刚才说了，Cloudflare Pages会将所有的.html后缀重定向或省略。因此xxx.com/xxx/xxx.html会变为xxx.com/xxx/xxx

但这个路径在VuePress中又会被路由映射到xxx.com/xxx/xxx.html

假设正在访问https://www.oneearmouse.com/posts/VuePress-Migrate.html
点击登陆giscus
登陆完成后，跳转到 https://www.oneearmouse.com/posts/VuePress-Migrate.html?giscus=xxx
Cloudflare不支持.html，308重定向，到 https://www.oneearmouse.com/posts/VuePress-Migrate?giscus=xxx
VuePress路由重定向，到https://www.oneearmouse.com/posts/VuePress-Migrate
最终，giscus=xxx的参数在多次跳转后被抛弃了，因此无法登陆

方案一：修改改一下VuePress的路由系统，比如VuePress Theme Vdoing 这个主题的路由系统就是不带html路径的

方案二：直接换别的博客系统，比如Hexo或者Hugo，默认的路由系统就是不带html路径后缀的

是在是太弱智了，浪费我一下午时间。我先歇歇再想想用哪种方案修改