在vue组件中加载iframe时cors阻止了错误，也许使用axios来模仿iframe？

问题描述

我正在本地做一些测试，所以我的开发网址是 http://localhost:3000，我想在我的 iframe 组件中添加一个 vue 以从外部域引入数据。但我收到了 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 ^(.*)$ $1 [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。

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

解决方法

您可能需要添加：

    Header always unset X-Frame-Options

消除来源问题