本地测试正常的城市搜索与事件数量筛选组件部署至gh-pages后异常问题排查

嘿，我碰到过好几个类似的情况，本地用mock数据跑的顺风顺水，一部署到gh-pages就哑火，还没报错，确实头疼。给你梳理几个最可能的原因和遗漏的要点：

• CORS跨域限制踩坑
  本地开发时，你可能用了webpack代理、devServer的proxy配置，或者mock数据压根不用跨域，所以没这个问题。但gh-pages是纯静态页面，直接请求第三方API的话，浏览器的同源策略会出手拦截——如果目标API的服务器没配置CORS允许https://evandersloot.github.io这个域名访问，请求就会悄悄失败，有时候控制台的错误提示藏在“网络”面板里，不是控制台的主面板，你可能没注意到。
  建议：打开浏览器的网络面板，查看API请求的状态码，要是看到403或者OPTIONS请求失败，那就是CORS的锅。解决办法要么找API提供者添加gh-pages域名到CORS白名单，要么自己搭个简单的后端代理转发请求，或者用支持JSONP的API（如果有的话）。

• 混合内容拦截
  要是你的API用的是http://协议，而gh-pages是https://的，浏览器会自动阻止“混合内容”请求——也就是从HTTPS页面加载HTTP资源，这个时候控制台可能只有个小警告，不是显眼的错误，很容易忽略。
  建议：检查所有API请求的URL，确保是https://开头的，把http换成https试试。

• API认证/权限问题
  本地测试时你可能用了存在本地存储的token、密钥，或者API允许localhost作为测试域名，但部署到gh-pages后，域名变了，API的权限配置没跟上——比如有些API的密钥是绑定特定域名的，localhost在白名单里，但gh-pages的域名没加进去，导致请求被拒绝，而且可能不会返回明确的错误信息。
  建议：检查API的认证配置，看看是否需要把https://evandersloot.github.io添加到允许的域名列表里，同时确认前端代码里的认证信息（比如token）在gh-pages环境下能正确加载，有没有因为环境变量配置错误导致认证失败。

• 异步加载的时机问题
  Mock数据加载速度极快，组件渲染时数据已经准备好了，但真实API请求有网络延迟，组件可能在数据返回前就完成了渲染，导致依赖数据的组件（比如城市搜索、事件筛选）因为拿到空数据或者undefined，出现隐性的逻辑错误，但没触发控制台报错。
  建议：检查组件的渲染逻辑，确保在数据加载完成前有加载状态（比如loading动画），并且对空数据做了兜底处理——比如判断数据是否存在再渲染搜索或筛选组件，避免因为数据未就绪导致的组件异常。

• GitHub Pages的缓存问题
  有时候部署后，浏览器缓存了旧的JS文件，里面还是指向mock数据的请求逻辑，压根没去调用真实API。这种情况控制台也不会报错，因为代码还是旧的逻辑。
  建议：用Ctrl+Shift+R强制刷新浏览器，清除缓存后再测试。长远来看，可以在打包时给静态资源文件名加上哈希值，避免浏览器缓存旧文件。

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