将外部url加载到div中

Question

我试图使用axios将一个外部url加载到使用vuejs的div中，我得到了

CORS策略阻止了从origin 访问 在 处的XMLHttpRequest：请求的资源上没有'Access-Control-Allow-Origin'标头。

我错过了什么？

堆栈跟踪：

CORS策略阻止从来源“http://localhost:8080”访问位于“https://pay.stripe.com/receipts/acct_1GJE8UKS9Y22NBSB/CH_1GWHGUKS9Y22NBSBGOGK5DK4/RCPT_HVJ9H5BUO4YZ2UCIEQ66MNBDXGX8YTU”的XMLHttpRequest：请求的资源上没有“Access-Control-Allow-Origin”标头。

<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的响应headers=>x-frame-options被设置为sameorigin，因此我甚至不能在我的网站上的iFrame中嵌入付款收据url。

Answer 1

我几乎可以肯定，您不能在IFRAME中显示收据URL，这就是为什么您会得到这个错误。相反，你应该使用来自收费的数据--或者支付意图，或者你创建的任何东西--来指示状态。