跨域问题?同源策略大全

3,756 阅读8分钟

前言:跨域与同源策略

跨域:通常出现在Web开发中,特别是在涉及到Ajax请求或Fetch API调用时,当一个网页尝试从不同的源加载资源时,就会遇到跨域问题。这里所说的“不同的源”,是指请求资源的源(由协议、域名和端口号组成)与提供资源的源不一致。

http:// 192.168.3.1 :3000 /home

协议(http), 域名(192.168.3.1), 端口(3000), 路径(/home)

同源策略:是为了保护用户的隐私和数据安全,如果没有同源策略,恶意网站可以通过脚本非法获取其他网站上的敏感数据,所以浏览器会通过实施同源策略来限制不同源之间的直接通信。同时,也有些特别的情况是不受同源策略限制的,比如:

img标签下的

link标签下的

script标签下的

一:JSONP实现同源

  1. 借助script标签的src属性不受同源策略的影响来发送请求

  2. 给后端携带一个参数 callback 并在前端定义 callback 函数体

  3. 后端返回 callback 的调用形式并将要响应的值作为 callback 函数的参数

  4. 当浏览器接收到响应后,就会触发全局的 callback 函数,从而让 callback 以参数的形式接收后端的响应

前端代码

<script>
    function jsonp(url, cb) {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');

        // 注册一个全局的回调函数
        window[cb] = function(data) {
          resolve(data);
        };

        // 设置脚本标签的src属性为请求的URL,并附加一个回调参数
        script.src = `${url}?cb=${cb}`;

        // 将脚本标签添加到body中,触发异步请求
        document.body.appendChild(script);
      });
    }

    // 使用jsonp函数发起请求
    jsonp('http://localhost:3000', 'callback').then(res => {
      console.log(res);  // 在控制台输出结果
    });
</script>

后端代码

const http = require('http');

// 创建一个HTTP服务器实例,并指定一个处理请求的回调函数
http.createServer(function(req, res) {
  // 解析请求的URL,并获取查询参数
  const query = new URL(req.url, `http://${req.headers.host}`).searchParams;

  // 检查查询参数中是否包含'cb'(callback)
  if (query.get('cb')) {
    // 获取回调函数名
    const cb = query.get('cb'); // 例如:'callback'

    // 准备要返回的数据
    const data = 'hello world';

    // 构造JSONP格式的字符串,格式为:callback("hello world")
    const result = `${cb}("${data}")`;

    res.end(result);
  }
}).listen(3000);

$

但使用这种方法实现同源有两个缺点:

  • 需要后端配合
  • 只支持 get 请求

二:cors实现同源

核心思想是后端通过Access-Control-Allow-Origin设置响应头来指定允许的域名,以此来通知浏览器此时同源策略不生效

前端代码

    <script>
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:3000');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
        }
    }
    </script>

后端代码

const http = require('http');

// 创建一个HTTP服务器实例,并指定一个处理请求的回调函数
http.createServer((req, res) => {
   // 设置响应头的状态码为200,表示成功
   res.writeHead(200, {
       // 设置Access-Control-Allow-Origin响应头,允许来自'http://127.0.0.1:5500'的请求
       'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
   });

   res.end('Hello World');
}).listen(3000);

同样,也可以设置Access-Control-Allow-methods来设置相应的请求方法,post,get等等

三:proxy代理

  1. 前端应用将原本需要跨域访问的请求发送给自身的后端服务器
  2. 后端服务器再将请求转发至实际的目标服务器,并从目标服务器获取数据
  3. 最后将数据返回给前端应用。

这样通过后端服务器作为中间层代理转发请求,可以绕过浏览器同源策略的限制,实现跨域数据的获取。

实现过程:

  • 创建一个XMLHttpRequest对象并发送一个GET请求到后端(http://192.168.1.63:3000)。onreadystatechange事件处理器会在请求状态改变时触发,并在请求完成且响应状态码为200 OK时打印出响应文本。
    <script>
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://192.168.1.63:3000');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
        }
    }
    </script>
  • 后端创建一个简单的HTTP服务器,监听3000端口,设置响应头Access-Control-Allow-Origin*,允许任何来源都可以访问此资源,解决跨域问题。
  • 再创建一个新的HTTP请求到目标服务器192.168.1.63:3000,与前端设置的要一致,并将从目标服务器收到的数据转发回原始请求者。
const http = require('http');

http.createServer(function(req, res) {
  // 设置响应头允许任何来源访问此资源
  res.writeHead(200, {
    "access-control-allow-origin": "*"
  });

  // 创建一个新的请求到目标服务器
  const options = {
    host: '192.168.1.63',
    port: '3000',
    path: '/',
    method: 'GET',
    headers: {}
  };

  // 发起代理请求
  http.request(options, proxyRes => {
    // 当从目标服务器接收到数据时,转发给原始请求者
    proxyRes.on('data', function(data) {
      res.end(data.toString())
    });
  }).end(); // 结束代理请求

}).listen(3000); // 监听3000端口

请注意,这样的代理服务器仅适用于开发环境,在生产环境中应当谨慎使用,因为它可能带来安全风险,如中间人攻击等

四:nginx实现同源

相当于node代理,大致原理如下:

image.png

五:Websocket实现同源

  • websocket是http协议的一部分,所以它有同源策略
  • websocket是长连接,可以发送和接收消息
  • websocket是html5新增的协议,它是一种双向通信协议,建立在tcp之上

实现过程: 前端

  • 创建一个新的 WebSocket 实例,并传入 url 参数。
  • 设置 onopen 事件处理器,当 WebSocket 连接成功打开时,将 params 对象转换为 JSON 字符串并通过 WebSocket 发送。
  • 设置 onmessage 事件处理器,当从 WebSocket 接收到消息时,解析接收到的数据,并调用 resolve 方法,将解析后的数据作为 Promise 的结果返回。
  • 调用 myWebSocket 函数,传入 WebSocket 服务器的 URL 和一个包含对象并使用 .then 方法处理 Promise 的解决情况
  <script>
    function myWebSocket(url, params = {}) {
      return new Promise(function(resolve, reject) {
        //创建一个新的 `WebSocket` 实例
        const socket = new WebSocket(url)
        
        //将 `params` 对象转换为 JSON 字符串并通过 WebSocket 发送。
        socket.onopen = () => {
          socket.send(JSON.stringify(params))
        }
        
        //解析接收到的数据,并作为 `Promise` 的结果返回
        socket.onmessage = function(e) {
          resolve(e.data);
        }
      })
    }
    myWebSocket('ws://localhost:3000', {age: 18}).then(res => {
      console.log(res);   
    })
  </script>

后端

  • npm init -y 初始化为后端项目
  • npm ws 安装ws
  • 使用 ws 库来创建一个 WebSocket 服务器,并监听3000端口。
  • 监听 'connection' 事件,每当有一个新的客户端连接到 WebSocket 服务器时,就会触发此事件处理器。
  • 为每个连接注册一个 'message' 事件处理器,当从客户端接收到消息时触发。并设置一个定时器,每两秒调用一次
const WebSocket = require('ws');

// 创建一个 WebSocket 服务器实例,并监听3000端口
const ws = new WebSocket.Server({ port: 3000 });
// 监听 'connection' 事件,每当有新的客户端连接到服务器时触发
ws.on('connection', function(obj) {
    // 监听 'message' 事件,每当从客户端接收到消息时触发
    obj.on('message', function(data) {
        // 向客户端发送一条欢迎消息
        obj.send('欢迎访问');
        // 设置一个定时器,每隔2秒向客户端发送一条消息
        setInterval(() => {  
            obj.send();
        }, 2000);
    });
});

六:postMessage

当页面一通过iframe嵌套了页面二,这两个页面因为跨域无法进行通讯,可以使用postMessage实现跨域通讯

postMessage 是一种在不同窗口、文档或框架之间安全地进行消息传递的方式,它支持跨源消息传递

下面带友友们实操一下:

主页 (index.html)

  • 初始化 obj 对象,包含姓名和年龄信息。
  • 当 <iframe> 加载完成后,通过 postMessage 发送 obj 对象给 detail.html
  • index.html 的 onmessage 事件处理器接收到 detail.html 发送的回复消息。
<body>
    <h2>首页</h2>
    <iframe id="frame" src="http://127.0.0.1:5500/postMessage/detail.html" width="800" height="500" frameborder="0"></iframe>

    <script>
        // 定义一个对象,包含要传递的数据
        let obj = {name: 'midsummer', age: 18};

        // 当 iframe 加载完成后执行以下代码
        document.getElementById('frame').onload = function() {
            // 向 iframe 中的页面发送一个消息
            this.contentWindow.postMessage(obj, 'http://127.0.0.1:8080');

            // 设置全局的 onmessage 事件处理器,用于接收来自其他窗口的消息
            window.onmessage = function(e) {
                console.log(e.data); // 打印接收到的消息数据
            };
        };
    </script>
</body>

详情页 (detail.html)

  • 接收到来自 index.html 的消息。
  • 解析消息数据,并更新页面上的显示内容。
  • 向 index.html 发送回复消息。
<body>
    <h3>详情页 -- <span id="title"></span> </h3>

    <script>
        // 获取页面中的 span 元素,用于显示信息
        let title = document.getElementById('title');

        // 设置全局的 onmessage 事件处理器,用于接收来自其他窗口的消息
        window.onmessage = function (e) {
            // 解构赋值,提取消息中的 data 属性,以及消息来源的 origin 属性
            let { data: {name, age}, origin } = e;

            // 更新 span 元素的文本内容,显示发送过来的名字和年龄信息
            title.innerText = `${name} ${age}`;

            // 向消息来源(即发送消息的窗口)发送新的消息
            e.source.postMessage(`midsummer现在${++age}岁`, origin);
        };
    </script>
</body>

简单来说就是通过设置 postMessage 的第二个参数为目标源地址,可以限制消息只能发送给指定源的窗口。当一个窗口接收到消息时,它可以通过 onmessage 事件处理器来处理消息,并且可以使用 e.source 来回发消息给发送方。

七:document.domain

当两个页面通过iframe进行嵌套,且两个页面的二级域名一致,可以使用document.domain实现同源 ,不知道二级域名的友友们可以参考下图

image.png

主页:

<body>
    <h2>首页</h2>
    <iframe id="frame" src="http://127.0.0.1:5500/postMessage/detail.html" width="800" height="500" frameborder="0"></iframe>
    <script>
        // 设置当前页面的 document.domain 为 '127.0.0.1'
        document.domain = '127.0.0.1';
       // 当 iframe 加载完成时执行的函数
        document.getElementById('frame').onload = function() {
       // 输出 contentWindow 中的 data 变量
        console.log(this.contentWindow.data);
      };
    </script>
</body>

详情页:

<script>
document.domain = '127.0.0.1'
var data = 'domain'
</script>

通过设置 document.domain放宽限制,允许在同一个顶级域名下的不同子域名之间进行通信。在 index.html 和 detail.html 中都设置了 document.domain 为 '127.0.0.1',确保 index.html 和 detail.html 之间的 document.domain 是相同的,从而绕过了同源策略的限制。