JavaScript解决跨域的三种方法小结

协议号：域名：端口号 / 路径

https://192.168.31.45:8080/user

https://192.168.31.45:8080/list

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <script>
    // 定义一个函数 jsonp，用于发送 JSONP 请求
    function jsonp(url, cb) {
      return new Promise((resolve, reject) => {
        // 创建一个 script 标签
        const script = document.createElement('script');
        
        // 设置 script 的 src 属性，包含了请求的 URL 和回调函数名称
        script.src = `${url}?cb=${cb}`; // http://localhost:3000?cb='callback'
        
        // 将 script 添加到文档中
        document.body.appendChild(script); // 浏览器自动请求 src 中的内容
        
        // 定义一个全局函数，用于处理返回的数据
        window[cb] = (data) => {
          resolve(data)
        }
      })
    }
    
    // 获取按钮元素
    let btn = document.getElementById('btn');
    
    // 绑定点击事件
    btn.addEventListener('click', () => {
      // 发送 JSONP 请求
      jsonp('http://localhost:3000', 'callback')
      .then(res => {
        console.log('后端的返回结果：' + res);
      })

    })
  </script>
</body>
</html>

const Koa = require('koa');
const app = new Koa();

// 定义中间件函数 main，处理请求并返回数据
const main = (ctx, next) => {
  console.log(ctx.query); // 输出请求参数对象 { cb: 'callback' }
  
  // 从请求参数中获取回调函数名称
  const cb = ctx.query.cb;

  // 准备要返回给前端的数据
  const data = '给前端的数据';
  
  // 构造带有回调函数名称的字符串，格式为 'callback("给前端的数据")'
  const str = `${cb}('${data}')`;
  
  // 将构造好的字符串作为响应体返回给前端
  ctx.body = str;
}

// 将 main 中间件注册到 Koa 应用中
app.use(main);

// 监听 3000 端口，启动服务器
app.listen(3000, () => {
  console.log('listening on port 3000');
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">获取数据</button>

  <script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      fetch('http://localhost:3000')  // 发送跨域请求到服务器
      .then(res => res.json())
      .then((res) => {
        console.log(res);  // 打印返回的数据到控制台
      })
    })

  </script>
</body>
</html>

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
     // cros实现原理
    'Access-Control-Allow-Origin': 'http://127.0.0.1:5500'  // 允许来自指定地址的跨域请求
  })

  let data = {
    msg: "hello cors"
  }
  res.end(JSON.stringify(data)) // 返回数据给前端页面
})

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Page</title>
</head>
<body>
  <h1>Parent Page</h1>
  <iframe src="http://child.example.com/child.html"></iframe>
  
  <script>
    document.domain = 'example.com';
    var messageFromParent = 'Hello from parent page!';
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Child Page</title>
</head>
<body>
  <h1>Child Page</h1>
  
  <script>
    document.domain = 'example.com';
    var messageFromChild = 'Hello from child page!';
    
    // 访问父级页面定义的变量
    var message = window.parent.messageFromParent;
    console.log('Message from parent: ' + message);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>a.html</h2>

  <!-- 创建一个 iframe 元素来加载 b.html -->
  <iframe src="http://127.0.0.1:5500/postMessage/b.html" frameborder="0" id="iframe"></iframe>

  <script>
    // 向 b.html 发送数据
    let iframe = document.getElementById('iframe');
    iframe.onload = function() {
      // 准备要发送的数据
      let data = {
        name: 'Tom'
      };
      // 通过 postMessage 方法向 iframe 发送数据
      iframe.contentWindow.postMessage(JSON.stringify(data), 'http://127.0.0.1:5500');
    }

    // 监听来自 b.html 的消息
    window.addEventListener('message', function(e) {
      console.log(e.data);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h4>b.html</h4>

  <script>
    // 监听来自父页面的消息
    window.addEventListener('message', function(e) {
      console.log(JSON.parse(e.data));

      if (e.data) {
        // 收到消息后延迟 2 秒发送回应给父页面
        setTimeout(function() {
          window.parent.postMessage('我接受到', 'http://127.0.0.1:5500');
        }, 2000);
      }
    });
  </script>
</body>
</html>