Load external url into a div

Question

I am trying to load an external url using axios into a div using vuejs and I am getting

Access to XMLHttpRequest at <CompleteUrl> from origin <MyWebsiteUrl> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What am I missing?

Stack Trace:

Access to XMLHttpRequest at 'https://pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/ch_1GwhguKs9y22NbsBgOgk5dk4/rcpt_HVj9h5buO4Yz2ucIeq66MNBdxGX8Ytu' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue Js code:

<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>

Update 1: I see that the https://pay.stripe.com/receipts/acct_1Gje8uKs9y22NbsB/ch_1GwhguKs9y22NbsBgOgk5dk4/rcpt_HVj9h5buO4Yz2ucIeq66MNBdxGX8Ytu url's response headers=>x-frame-options is set to sameorigin, therefore I cannot even embed the payment receipt url in an iFrame on my website.

Answer 1

I'm nearly certain you can't show the receipt URL inside an IFRAME, which is why you're getting this error. You should instead use the data from the Charge - or the Payment Intent, or whatever you're creating - to indicate the status.