使用live server开发SPA刷新时出现Cannot GET路由及CSP资源拦截问题

1. 刷新页面出现「Cannot GET + 路由路径」的解决办法 #

这个问题是前端路由与静态服务器的匹配冲突导致的：SPA的前端路由（page.js默认使用history模式）在页面刷新时，浏览器会直接向服务器请求对应路由路径的文件，但服务器上并没有这些文件，所以返回404。解决方式有两种：

方式一：修改page.js为hash模式 #

无需改动服务器配置，直接将路由切换为hash前缀形式：

// 初始化路由基础路径为hash
page.base('/#');
// 定义路由逻辑
page('/about', () => { /* 页面渲染逻辑 */ });
page('/home', () => { /* 页面渲染逻辑 */ });
page();

这种方式下，刷新时浏览器会把路由作为hash部分处理，不会向服务器发送新请求，直接由前端路由接管。

方式二：配置Live Server重定向所有请求到index.html #

如果你用的是VS Code的Live Server扩展，按以下步骤配置：

• 打开VS Code设置（快捷键Ctrl+,）
• 搜索「Live Server: Middleware」，点击「编辑 in settings.json」
• 添加以下配置：

"liveServer.settings.middleware": [
  {
    "middleware": "redirect",
    "url": "/*",
    "redirect": "/index.html"
  }
]

保存后重启Live Server，刷新页面时服务器会把所有路由请求重定向到index.html，交由前端路由处理。

如果使用http-server这类命令行静态服务器，启动时添加重定向参数：

http-server -P http://localhost:5500?

2. Content Security Policy (CSP) 阻止favicon加载的解决办法 #

控制台的错误是因为页面CSP规则限制了favicon的加载，需要调整CSP配置：

• 在index.html的<head>标签中添加CSP meta标签，允许加载指定来源的图片资源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' http://127.0.0.1:5500;">

若不需要严格的CSP限制（不推荐生产环境使用），也可以简化规则：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *;">

另外，确保项目根目录下存在favicon.ico文件，或在HTML中指定正确的favicon路径：

<link rel="icon" href="/favicon.ico" type="image/x-icon">

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