cors blocked errors when loading iframe in vue component, maybe use axios to mimic iframe?

Question

I'm doing some testing locally so my dev url is http://localhost:3000, I'm wanting to add an iframe into my vue component to bring in data from an outside domain. But I'm getting a cors errors being blocked, etc.

I do have access to the domain and server I'm accessing so I have added

<VirtualHost *:443>
...
    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

...

<Directory ...>
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} OPTIONS
  RewriteRule ^(.*)$ $1 [R=200,L]

but even with that I still get cors error

Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

so iframes won't work for me or will they?

My second thought was maybe I can use axios to pull in the markup from the domain and mimic an iframe and dump and render the html? but even so, I'm not completely sure how to render the html from the axios call in vue.

anyone have any suggestions on a possible solution?

Answer 1

You may need to add:

    Header always unset X-Frame-Options

To remove origin issues