vue组件加载iframe时cors阻塞报错，可能用axios模仿iframe？

Question

我正在本地做一些测试，所以我的开发 url 是 http://localhost:3000，我想在我的 vue 组件中添加一个 iframe 以引入来自外部域的数据。但是我遇到 cors 错误被阻止等

我确实可以访问我正在访问的域和服务器，所以我添加了

<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 ^(.*)$  [R=200,L]

但即便如此我仍然得到 cors 错误

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

所以 iframes 对我不起作用还是他们会？

我的第二个想法是也许我可以使用 axios 从域中提取标记并模仿 iframe 并转储并呈现 html？但即便如此，我也不完全确定如何从 vue.

中的 axios 调用中呈现 html

有人对可能的解决方案有任何建议吗？

Answer 1

您可能需要添加：

    Header always unset X-Frame-Options

消除来源问题

vue组件加载iframe时cors阻塞报错，可能用axios模仿iframe？

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

apache

vue.js

iframe

axios

same-origin-policy