前端跨域问题解决方案:CORS、JSONP 与 Nginx 实践
梳理跨域问题的三种主流解决思路,附配置示例和生产环境容易忽略的点。
支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号
2026-08-01 12:00:49 微信分享 JS-SDK Open Graph 自定义分享卡片 前端
网页在微信里被转发时,默认抓出来的标题、描述和缩略图经常对不上,分享出去很丑,也不符合品牌预期。
要改这个行为,现在主流就两条路:走微信公众号的 JS-SDK,或者在页面 head 里塞 Open Graph 标签。两种方案我都用过,下面把配置过程和实际踩过的点记一下。
先说 JS-SDK 这条线。这条路的前提是你得有个认证过的公众号,订阅号或服务号都行,但必须认证。
配置部分几个东西要准备好。先去公众号后台,在「功能设置」里填 JS 接口安全域名。这里域名必须是备案过的,没备案加不上去。同一个页面再设置 IP 白名单,把后端服务的出口 IP 加进去,不然后面调接口会报权限错误。
AppID 和 AppSecret 在「基本配置」里拿,老熟客了。还有一步经常被忘:下载微信生成的校验文件,扔到域名的根目录。有时候传完要等个一两分钟才生效,急着调容易报 config 失败,误以为文件不对。
代码层面,页面先引入 JS-SDK:
然后初始化: wx.config({ debug: false, appId: '你的AppID', timestamp: 自己生成的时间戳, nonceStr: 随机字符串, signature: '后端给过来的签名', jsApiList: ['updateAppMessageShareData'] });
signature 要后端算,因为依赖 access_token 和 jsapi_ticket,走前端直接算会有暴露 secret 的风险,而且流程上也不对。
配置完,在 wx.ready 里调分享接口: wx.ready(function() { wx.updateAppMessageShareData({ title: '自定义标题', desc: '自定义描述', link: '当前页面链接', imgUrl: 'https://example.com/image.jpg', success: function() { // 分享配置成功 } }); });
这个接口只管分享给朋友那一下,分享到朋友圈另有一个 onMenuShareTimeline,思路差不多,不展开了。
如果不需要完全动态控制分享内容,或者压根没有公众号,那 Open Graph 标签方案会更轻量。直接在 head 里加几个 meta 标签:
分享图必须走 HTTPS,建议用 300x300 的图,并且一定确保外网能直接访问到,不要放内网路径。
这方案优势是简单,不用走公众号那套鉴权,缺点嘛——对微信版本的依赖比较明显,有些低版本或者安卓某些 WebView 不认 og:image,抓了张错图甚至白图,当时切换过 JS-SDK 才稳定。
再说几个容易栽的细节。一个是域名要求,不管哪种方案,链接都必须是备案域名,没备案微信内置浏览器直接不给拉取。另一个是图片隐藏的写法。经常会有需求:分享卡片显示一张漂亮图,但页面本身不需要展示它。
有人会用 display:none 藏 img 标签,结果分享卡片里图是空的。微信读分享图走的是后台抓取,display:none 的元素它抓不到。正确姿势是用 visibility:hidden,或者把 img 绝对定位挪出屏幕外。这个坑第一次遇上的时候挺郁闷的。
效果验证不复杂,在微信里打开页面,点右上角三个点,选“转发给朋友”,看看卡片上显示的是不是自己设置的内容。
如果没变化,可以清一下缓存再试;有时候微信会缓存旧卡片信息。
总结一下,如果你有认证公众号,需要完全控制分享标题、描述、缩略图,直接上 JS-SDK,稳定性好,能覆盖的版本广;如果只是临时需求或没有公众号权限,Open Graph 标签可以凑合用,但要接受它某些情况下可能不生效。两条路都摆在这了,挑适合自己项目的来就行。
梳理跨域问题的三种主流解决思路,附配置示例和生产环境容易忽略的点。
记录 ECharts 折线图的常用样式配置,包括线条、数据点、标签、空值处理以及平滑曲线、阶梯线和区域填充等实际使用经验,省得每次都翻文档。
分享 Socket.IO 自动重连的参数配置、常见坑和手动控制方案,帮你避开线上事故。