将外部 url 加载到 div 中答案

【问题标题】：Load external url into a div将外部 url 加载到 div 中
【发布时间】：2020-10-11 22:14:54
【问题描述】：

我正在尝试使用 axios 将外部 url 加载到使用 vuejs 的 div 中，我得到了

CORS 策略已阻止从源 <MyWebsiteUrl> 访问位于 <CompleteUrl> 的 XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我错过了什么？

堆栈跟踪：

从源“http://localhost:8080”访问“https://pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/ch_1GwhguKs9y22NbsBgOgk5dk4/rcpt_HVj9h5buO4Yz2ucIeq66MNBdxGX8Ytu”的 XMLHttpRequest 已被 CORS 策略阻止：否“访问控制-请求的资源上存在 Allow-Origin' 标头。

Vue Js 代码：

<template>  
    <div id="invoice-page" v-html="paymentReceipt">

<script>
import axios from 'axios';

let response=await axios.get('https://pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/ch_1GwhguKs9y22NbsBgOgk5dk4/rcpt_HVj9h5buO4Yz2ucIeq66MNBdxGX8Ytu');
this.paymentReceipt= response.data;
</script>

更新 1： 我看到https://pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/ch_1GwhguKs9y22NbsBgOgk5dk4/rcpt_HVj9h5buO4Yz2ucIeq66MNBdxGX8Ytu url 的响应标头=>x-frame-options 设置为 sameorigin，因此我什至无法将付款收据 url 嵌入我网站上的 iFrame 中。

【问题讨论】：

如果是你的后端，你必须在后端启用cors。
你查过这个错误吗？ developer.mozilla.org/docs/Web/HTTP/CORS
你的后端是什么？ Node.js？
我的后端是用 .net、NodeJs 编写的 Lambda 函数的混合体。但是，在这种特定情况下，我的应用程序完成了对条带的付款，并试图在我的应用程序中显示条带付款收据。我假设付款成功后，我必须在 Iframe 中显示来自 Payment Recipt url ("pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/…) 的数据。

标签： vue.js vuejs2 stripe-payments

【解决方案1】：

我几乎可以肯定您无法在 IFRAME 中显示收据 URL，这就是您收到此错误的原因。您应该改用来自 Charge 的数据（或 Payment Intent 或您正在创建的任何内容）来指示状态。

【讨论】：