<iframe>和.htaccess的Cors域问题，为什么？

Question

我的问题是，当我尝试访问子域（test.example.com:xx）的 <脚本> var x = document.getElementById（“ frames”）; console.log（x）; window.onload = function（）{     console.log（window.frames [0] .document.body.innerHTML）; }

这是我的 https://test.example.com/index.html：

  <！DOCTYPE html>

<身体>
    
这是我的测试子域... 



 

这是两个域的.htaccess文件的代码，分别是 https://example.com 和 https://test.example.com ：

  RewriteEngine开启
RewriteCond％{HTTPS}已关闭
RewriteRule ^（。*）$ https：//％{HTTP_HOST}％{REQUEST_URI} [L，R = 301]

标头始终将x-frame-options设置为“ ALLOWALL”
标头始终设置为Access-Control-Allow-Origin：“ *”
标头始终设置Access-Control-Allow-Credentials：“ true”
标头始终设置Access-Control-Allow-Methods：“ POST，GET，OPTIONS”
标头始终设置为Access-Control-Allow-Headers：“内容类型”
标头始终设置为原点：“ *”
 

出了什么问题，我该如何解决？

注意：我正在使用Chrome，Firefox和Safari来测试我的网站，此行中产生错误：

  console.log（window.frames [0] .document.body.innerHTML）;
 

Answer 1

Kimo41，我已经阅读了您的评论，并且我同意您的要求，CORS政策必须是网站和域名所有者（而不是网络浏览器）的决定，我认为我为您提供了一个很好的解决方案，如果您使用Cloudflare作为DNS，则可以尝试使用JS WORKERS，以允许在您的域中使用cors。

响应头：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  let response = await fetch(request)

  // Make the headers mutable by re-constructing the Response.
  response = new Response(response.body, response)
  response.headers.set('x-my-header', 'custom value')

  return response
}

请求标头：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Make the headers mutable by re-constructing the Request.
  request = new Request(request)
  request.headers.set('x-my-header', 'custom value')

  return await fetch(request)
}