Home » vue » Load external url into a div

Load external url into a div

Posted by: admin November 26, 2021 Leave a comment

Questions:

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.

Answers:

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.