跨域问题？同源策略大全

前言：跨域与同源策略

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

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

img标签下的

link标签下的

script标签下的

一：JSONP实现同源

借助script标签的src属性不受同源策略的影响来发送请求
给后端携带一个参数 callback 并在前端定义 callback 函数体
后端返回 callback 的调用形式并将要响应的值作为 callback 函数的参数
当浏览器接收到响应后，就会触发全局的 callback 函数，从而让 callback 以参数的形式接收后端的响应

前端代码

javascript 复制代码

<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>

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

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

二：cors实现同源

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

前端代码

javascript 复制代码

    <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>

三：proxy代理

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

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

实现过程：

创建一个XMLHttpRequest对象并发送一个GET请求到后端（http://192.168.1.63:3000）。onreadystatechange事件处理器会在请求状态改变时触发，并在请求完成且响应状态码为200 OK时打印出响应文本。

javascript 复制代码

  <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>

四、Websocket实现同源

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

实现过程：前端

创建一个新的 WebSocket 实例，并传入 url 参数。
设置 onopen 事件处理器，当 WebSocket 连接成功打开时，将 params 对象转换为 JSON 字符串并通过 WebSocket 发送。
设置 onmessage 事件处理器，当从 WebSocket 接收到消息时，解析接收到的数据，并调用 resolve 方法，将解析后的数据作为 Promise 的结果返回。
调用 myWebSocket 函数，传入 WebSocket 服务器的 URL 和一个包含对象并使用 .then 方法处理 Promise 的解决情况

javascript 复制代码

  <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>