如果我控制框架，如何讓父 window 訪問框架的內容？

Question

我正在制作一個必須打開 API window 的小腳本，例如：

var api = window.open("https://example.com", "Poppout", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=400,top="+(screen.height-400)+",left="+(screen.width-840)); 

每當我嘗試訪問它時： api.document.getElementById('ex').value; 我收到錯誤：

Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
    at <anonymous>:1:5

我知道為什么會這樣，但由於我是 API url 的所有者，我可以通過某種方式啟用它嗎？

我的index.js代碼：

const express = require('express');
const app = express();
const http = require('http');
const router = express.Router();
const path = require('path')
const server = http.createServer(app);
const { Server } = require("socket.io");
const i = new Server(server);

app.use(express.json());
app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "*");
  next();
 });
router.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'))
});
app.use('/', router);

app.post('/', (req, res) => {
  const { chat, username } = req.body;
  console.log(username, '÷', chat)
  i.emit('chat', chat, username);
});

server.listen(3000, () => {
  console.log('listening on port: 3000');
});

Answer 1

1. 安裝 cors npm i cors

2. 導入 cors 並用它來管理跨域請求

   const cors = require('cors');

   app.use(cors()); //允許任何url

   app.options('*', cors())

您還可以通過設置 cors 選項將特定網址列入白名單 Origin 值：

const cors = require('cors');
       
    
const corsOptions = {
origin: [
 'https://example.com',
'https://yourURL.com',
'http://anotherURL.com
],
optionSuccessStatus:200, //for Legacy browsers

}
app.use(cors(corsOptions));
app.options('*', cors());