Google Pay 无法在移动设备中的边缘和 Firefox 上运行，并且在所有浏览器的桌面上运行良好

Question

我曾使用 VueJS 开发过 Google Pay。它在所有网络浏览器中工作正常，但在 Edge 和 Firefox 等移动浏览器中工作，在 Chrome 中工作。

当我们点击“GooglePay”按钮时，流动的弹出窗口继续呈现但不起作用

当我在控制台中观察时..它显示错误，例如

Uncaught (in promise) DOMException: Blocked a frame with origin "https://example.com" from 
accessing a cross-origin frame.

at hasOwnProperty (<anonymous>)
at hasOwn (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:192:27)
at observe (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:933:18)
at Cd.reactiveSetter [as Va] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1008:35)
at Cd.show (https://pay.google.com/gp/p/js/pay.js:213:528)
at https://pay.google.com/gp/p/js/pay.js:290:341

问题仅出现在移动设备上的 Edge 和 Firefox 中，而不出现在桌面设备中。

请帮助我！！

Answer 1

这就是我看到的跨源错误。当网页尝试从与提供该网页的域、协议或端口不同的域、协议或端口访问资源时，就会出现此错误。这是网络浏览器实现的一项安全功能，用于防止恶意网站访问其他网站的敏感信息。

要解决此问题，您需要确保 Google Pay API 是从与您的网页相同的源加载的。您可以通过在自己的服务器上托管 Google Pay API 或使用支持 CORS 的 CDN 来实现此目的：

1. 在您自己的服务器上托管 Google Pay API：您可以将其托管在您自己的服务器上，而不是直接从 Google 服务器加载 Google Pay API。这样，API 将从与您的网页相同的源提供服务，并且您不会遇到任何跨源问题。
2. 使用支持 CORS 的 CDN：如果您更喜欢使用 CDN 托管 Google Pay API，请确保 CDN 支持 CORS。这将允许从不同的域加载 API，同时仍然可以从您的网页源进行访问。
3. 检查您的网站是否已注册 Google Pay API：确保您已完成为 Google Pay API 注册网站的流程。这可能涉及通过 Google Pay 和电子钱包控制台请求生产访问权限以及审查您的网站对 API 的使用情况
4. 验证您的网站是否在安全环境中使用 Google Pay API：Google Pay API 只能在安全环境中的网站上使用。确保您的网站使用 HTTPS 而不是 HTTP 来访问 API
5. 向 Google 注册您的公共加密密钥：如果您使用 DIRECT tokenizationSpecification 类型集成，则必须通过 Google Pay 和电子钱包控制台向 Google 注册您的公共加密密钥

您可以在此处和此处找到更多信息。

也可以将以下标签添加到 Vue.js 项目中的 public/index.html 文件中：

<meta name="referrer" content="no-referrer">

此标签告诉浏览器在向其他域发出请求时不要发送 Referer 标头。这可以帮助解决一些 CORS（跨域资源共享）问题。

Referer 标头是一个 HTTP 标头，其中包含用户单击当前页面链接之前所在网页的 URL。默认情况下，Referer 标头会随浏览器发出的每个请求一起发送，包括对其他域的请求。当网页尝试从与提供该网页的域不同的域访问资源时，这可能会导致 CORS 问题。

通过将 no-referrer 元标记添加到 HTML 文档的 head 部分，您可以告诉浏览器在向其他域发出请求时不要发送 Referer 标头。这可以通过阻止浏览器将有关上一页 URL 的信息发送到托管所请求资源的服务器来帮助解决一些 CORS 问题。

有关元标记“referrer”的更多信息，您可以在此处

找到