Vue CLI项目中Stripe Elements无法正常工作的问题排查与解决方案

最近我在用Vue CLI开发Vue组件时，踩了个Stripe Elements的大坑，折腾整整两天才解决，特意分享出来帮大家少走弯路。

一开始走偏的排查方向 #

• 刚遇到问题时，浏览器控制台弹出两条警告，提示Stripe的iframe内容因跨域被拦截。我想当然把这当成了问题根源，花了两天时间研究各种跨域解决方案——调CORS配置、折腾反向代理，结果啥用都没有，差点给自己整emo了。
• 后来翻出之前一个Stripe功能正常的旧项目测试，发现那个旧项目居然也有一模一样的跨域警告，但Stripe Elements完全能正常运行！这才反应过来：那两条跨域警告根本不是导致功能失效的原因！

问题的真正根源&解决方案 #

按照Stripe官方文档的指引，集成步骤是先在index.html头部引入Stripe JS脚本，然后在组件函数里用下面的代码创建Stripe对象：

var stripe = Stripe(key);

但在Vue CLI的项目环境里，这么写根本行不通！

正确的做法是直接从全局window对象调用Stripe：

var stripe = window.Stripe(key);

就这么一处微小的改动，所有问题瞬间解决了！

总结 #

如果你在最新版本Vue的Vue CLI项目里集成Stripe Elements时遇到功能失效的问题，别再盯着跨域警告死磕了，试试用window.Stripe(key)创建实例，这应该能帮你节省大量不必要的排查时间。

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