前端用 fetch 请求 http 的列表接口,浏览器直接拦截并报混合内容,页面上列表一直是空的,蜘蛛渲染时也拿不到数据。
一开始怀疑是「反向代理只给页面域名配了证书」,查了一圈,方向不对。
把日志和配置对完,能解释这个现象的基本就这几处。接口地址写在配置里,还是 http。还有一种是接口域名没有证书,只能走 http。
还有一种情况,跨域配置只允许了 http 来源。
先确认接口协议和状态
curl -sI http://api.example.com/list
给接口域名配上证书
certbot --nginx -d api.example.com
前端改成 https 并更新跨域白名单
fetch('https://api.example.com/list')
末了验证渲染后页面里有列表项
curl -s https://www.example.com/list | grep -c 'item'
改之前先确认了最近有没有人动过配置,避免白查一遍。
这次没动代码,只在配置和运行环境上找原因。
改完先别撤,确认这几项。接口切到 https 后列表正常渲染,渲染截图里能看到完整数据。
接口没证书时先补证书再改前端,单改前端只会变成请求失败。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。
