常见跨域方法原理及其用例

其他 2018-11-29 00:24:42 阅读次数: 0

一、常见跨域方法

1） JSONP跨域 需要目标服务器配合一个callback函数
2） AJAX跨域 CORS
3） 使用window.name+iframe来进行跨域
4） window.postMessage:跨文档通信 API（Cross-document messaging）
5） 跨子域:修改document.domain
6） 通过Nginx反向代理
7） WebSocket

二、原理及其用例

JSONP跨域：

原理：
<script>可跨域请求资源，json格式被原生 JavaScript支持,客户端与服务器端配合
客户端动态定义并实现一个函数,将函数添加到请求的目标 URL中,通过创建 <script src="URL">跨域请求资源
服务器端接受到请求,获取添加在请求 URL中的函数,将需要的数据以参数的形式传入获取到的函数中并返回
客户端获取到带有参数(需要的数据)的函数,执行该函数(客户端已经定义并实现了该函数),处理数据
用例：

客户端代码：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JSONP</title>
  <style>
    body, input, select, button, h1 {
      font-size: 28px;
      line-height:1.7;
    }
</style>
</head>
<body>

  <h1>员工查询</h1>
  <label>请输入员工编号：</label>
  <input type="text" id="keyword" />
  <button id="search">查询</button>
  <p id="searchResult"></p>
  <script>
    /**
     * 原理：
     * <script>可跨域请求资源，json格式被原生 JavaScript支持,客户端与服务器端配合
     * 客户端动态定义并实现一个函数,将函数添加到请求的目标 URL中,通过创建 <script src="URL">跨域请求资源
     * 服务器端接受到请求,获取添加在请求 URL中的函数,将需要的数据以参数的形式传入获取到的函数中并返回
     * 客户端获取到带有参数(需要的数据)的函数,执行该函数(客户端已经定义并实现了该函数),处理数据
     */
    function myJSONP(url) {

      //创建一个十位数的随机数
      var randomNumber = Math.random().toString().substring(2, 12);
      // 生成 cbname(jsonp请求用到的回调函数,后面会添加到URL中)
      var cbname = "callbackName" + randomNumber;

      // 将 cbname函数挂载到 myJSONP函数上(即 myJSONP里面有一个 cbname函数)
      var myJSONP_cbname = "myJSONP." + cbname;
      //实现 cbname回调函数
      myJSONP[cbname] = function (response) {
        try {
          // var data=JSON.parse(data); //返回的数据已经是json格式，所以不用转换，否则错误
          if (response.success)
            document.querySelector("#searchResult").innerHTML=response.msg;//请求成功
          else
            document.querySelector("#searchResult").innerHTML="出现错误："+response.msg;//请求失败
        } finally {
          //请求完成,删除函数以及移除脚本
          delete myJSONP[cbname];
          script.parentNode.removeChild(script);
        }
      };

      //创建script用于发送请求
      var script = document.createElement("script");
      //将 myJSONP里面的 cbname函数添加到URL中
      if (url.indexOf("?") === -1) {
        url += "?callback=" + myJSONP_cbname;
      } else {
        url += "&callback=" + myJSONP_cbname;
      }
      //将脚本的 src指向请求URL,然后将脚本添加到页面中,触发http请求
      script.src = url;
      document.body.appendChild(script);
    }

    document.querySelector("#search").onclick=function(){
      // jsonp跨域请求(模拟跨域请求)
      // jsonp.html 在浏览器中打开的地址为: http://localhost/jsonp.html
      // jsonp.php 服务器地址为: http://127.0.0.1:80/jsonp.php 
      var url="http://127.0.0.1:80/jsonp.php?number="+document.querySelector("#keyword").value;
      myJSONP(url);
    }

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

服务器端代码：

<?php
//设置页面内容是html编码格式是utf-8
// header("Content-Type: text/plain;charset=utf-8"); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
        array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
    );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通过员工编号搜索员工
function search(){    
    $jsonp = $_GET["callback"];
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值为否为空
    //超全局变量 $_GET 和 $_POST 用于收集表单数据
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo $jsonp . '({"success":false,"msg":"参数错误"})';
        return;
    }
    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number = $_GET["number"];    
    $result = $jsonp . '({"success":false,"msg":"没有找到员工。"})';
    
    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = $jsonp . '({"success":true,"msg":"找到员工：员工编号：' . $value["number"] .                
                            '，员工姓名：' . $value["name"] . 
                            '，员工性别：' . $value["sex"] . 
                            '，员工职位：' . $value["job"] . '"})';
            break;
        }
    }
    echo $result;
}

//创建员工
function create(){
    //判断信息是否填写完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
        return;
    }
    //TODO: 获取POST表单数据并保存到数据库
    
    //提示保存成功
    echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}

?>

运行结果：

CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

原理：详情点击这里（阮一峰的这篇博客讲得很清楚）

用例：

AJAX跨域之CORS "跨域资源共享"（Cross-origin resource sharing）GET请求之简单请求：

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body, input, select, button, h1 {
      font-size: 28px;
      line-height:1.7;
    }
  </style>
</head>

<body>
  <h1>查询员工</h1>

  <label>请输入员工编号：</label>
  <input type="text" id="keyword" />
  <button id="search">查询</button>
  <p id="searchResult"></p>

  <script>
    function handlerResponse(response){
      var response=JSON.parse(response);
      if (response.success)
        document.querySelector("#searchResult").innerHTML=response.msg;//请求成功
      else
        document.querySelector("#searchResult").innerHTML="出现错误："+response.msg;//请求失败
    }
    
    document.querySelector("#search").onclick=function(){
      // CORS跨域请求(模拟跨域请求)
      // AjaxCORS.html 在浏览器中打开的地址为: http://localhost/AjaxCORS.html
      // AjaxCORS.php 服务器地址为: http://127.0.0.1:80/AjaxCORS.php
      var url="http://127.0.0.1:80/AjaxCORS.php?number="+document.querySelector("#keyword").value;
      ajaxGET(url,handlerResponse);
    }

    function ajaxGET(url,callback){
      var xhr=new XMLHttpRequest();
      xhr.open("GET",url);
      xhr.send(null);
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
          callback(xhr.responseText);
        }
      }
    }

  </script>
</body>

</html>

服务器端代码：

<?php
//设置页面内容是html编码格式是utf-8
// header("Content-Type: text/plain;charset=utf-8"); 
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true'); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
        array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
    );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通过员工编号搜索员工
function search(){
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值为否为空
    //超全局变量 $_GET 和 $_POST 用于收集表单数据
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo '{"success":false,"msg":"参数错误"}';
        return;
    }
    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number = $_GET["number"];
    $result = '{"success":false,"msg":"没有找到员工。"}';
    
    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 
                            '，员工姓名：' . $value["name"] . 
                            '，员工性别：' . $value["sex"] . 
                            '，员工职位：' . $value["job"] . '"}';
            break;
        }
    }
    echo $result;
}?>

 运行结果：

AJAX跨域之CORS "跨域资源共享"（Cross-origin resource sharing）POST请求之非简单请求：

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="application/json; charset=utf-8">  
  <title>AjaxCORS</title>
  <style>
    body, input, select, button, h1 {
      font-size: 28px;
      line-height:1.7;
    }
  </style>
</head>
<body>
  <h1>新建员工</h1>
  <label>请输入员工姓名：</label>
  <input type="text" id="staffName" /><br>
  <label>请输入员工编号：</label>
  <input type="text" id="staffNumber" /><br>
  <label>请选择员工性别：</label>
  <select id="staffSex">
    <option>女</option>
    <option>男</option>
  </select><br>
  <label>请输入员工职位：</label>
  <input type="text" id="staffJob" /><br>
  <button id="save">保存</button>
  <p id="createResult"></p>

  <script>
    function handlerResponse(response){
      var response=JSON.parse(response);
      if (response.success)
        document.querySelector("#createResult").innerHTML=response.msg;//请求成功
      else
        document.querySelector("#createResult").innerHTML="出现错误："+response.msg;//请求失败
    }
    
    document.querySelector("#save").onclick=function(){
      // CORS跨域请求(模拟跨域请求)
      // AjaxCORS.html 在浏览器中打开的地址为: http://localhost/AjaxCORS.html
      // AjaxCORS.php 服务器地址为: http://127.0.0.1:80/AjaxCORS.php
      var url="http://127.0.0.1:80/AjaxCORS.php";
            var data= {
                "name": document.querySelector("#staffName").value, 
                "number": document.querySelector("#staffNumber").value, 
                "sex": document.querySelector("#staffSex").value, 
                "job": document.querySelector("#staffJob").value
      };
      data=JSON.stringify(data); 
      ajaxPOST(url,data,handlerResponse);
    }

  function ajaxPOST(url,data,callback){
    var xhr=new XMLHttpRequest();
    xhr.open("POST",url);
    xhr.setRequestHeader("Content-type","application/json");
    xhr.send(data);
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4 && xhr.status==200){ 
        callback(xhr.responseText);
      }
    }
  }

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

服务器端代码：

<?php
//设置页面内容是html编码格式是utf-8
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:content-type');
// header('Access-Control-Allow-Methods:POST,GET,OPTION');
// header('Access-Control-Allow-Credentials:true'); 
// header("Content-Type: text/plain;charset=utf-8"); 
header("Content-Type: application/json;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
        array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
    );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}//创建员工
function create(){
  //判断信息是否填写完全  
  $data=json_decode(file_get_contents('php://input'),true);  //转换成数组  
    if (!$data["name"] || !$data["number"]    || !$data["sex"]    || !$data["job"]) {
        echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
        return;
    }
  //TODO: 获取POST表单数据并保存到数据库
      
    //提示保存成功
    echo '{"success":true,"msg":"员工：' . $data["name"] . ' 信息保存成功！"}';
}
?>

运行结果：

首先是预检请求 ，使用 OPTION方法

然后是正式请求，使用 POST方法：

 即：非简单请求分为 ，"预检"请求 + 简单请求。

使用window.name+iframe来进行跨域：
原理：
通过浏览器的 window.name 属性实现跨域请求(每个浏览器窗口都有一个 window.name属性)
原理：无论是否同源，只要在 “同一个窗口里”，前一个网页设置了这个属性，后一个网页就可以读取它,如页面 A中
有一个 iframe,iframe.src指向页面 B,若页面 B设置了 window.name属性,那么页面 A中的那个 iframe就能获
取到页面 B中的 window.name(虽然 A中的 iframe能读取到 B中的 window.name属性,但是由于iframe在页面 A中,
而 iframe.src指向页面 B,浏览器会因为页面 A与 iframe不同源而阻止获取,因此还需要设置 iframe.src指向页面 A所在的域)
用例：
页面 a.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 假设这个页面是域 www.aaa.com 下面的页面 A.html -->
  <title>a.html</title>
</head>
<body>
  <h2>domainA/a.html</h2>  
  <button id="btn">get_data_by_iframe_window.name</button>
  <h3 id="data"></h3>
  <script>      

    //获取按钮绑定事件，添加一个 iframe
    var btn=document.getElementById("btn");
    btn.onclick=function(){
      var ifr=document.createElement("iframe");
      //模拟跨域请求
      // a.html 在浏览器中打开的地址为: http://localhost/a.html
      // b.html 需要请求的页面地址为: http://127.0.0.1:80/b.html
      ifr.src="http://127.0.0.1/b.html";
      //添加 iframe到当前页面中,并设置为不可见
      ifr.style.display = 'none';
      var body=document.getElementsByTagName("body")[0];
      body.appendChild(ifr);
      
      //iframe.src会触发 iframe.onload事件,因此使用标记来判断 iframe.src是否已经更改
      var flag=true;
      ifr.onload=function(){                
        if(flag){     
          flag=false;        
          //为了不让浏览器阻止不同源获取window.name属性的值,这里需要设置 iframe与当前页面在同一个域
          //(也可以指向其他页面,只要与创建当前 iframe的页面在同一个域都可以)
          ifr.src="http://localhost/a.html";
        }
        else{
          //contentWindow属性返回<iframe>元素的Window对象,由此获取 b.html页面中设置的 window.name属性的值
          document.querySelector("#data").innerText=ifr.contentWindow.name;          
          //获取数据完成,删除 iframe
          body.removeChild(ifr);   
        }
      }
    }    
    
    /**
     * 假设当前页面为 domainA/p.html,里面有 iframe.src=domianA/a.html
     * 如果开始时候 iframe.src=domainB/b.html，后来 iframe.src=domianA/a.html时，
     * 那么必须是先执行完 iframe.src=domainB/b.html这就语句后面的代码后，iframe才会属于域 domainA,
     * 而在执行完 iframe.src=domainB/b.html这就语句后面的代码前，iframe依然属于域 domainB。
     *
     * 如：假设在页面 domainA/p.html中    属于域 domainA,iframe在 p.html中创建
     * 
     * 首先
     * iframe.src=domainB/b.html
     * 执行完其他代码             现在属于域 domainB
     * 
     * 然后
     * iframe.src=domianA/a.html 现在属于域 domainB
     * 执行完其他代码             现在属于域 domainA
     * */    
  </script>
</body>
</html>

页面 b.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>b.html</title>
</head>
<body>
  <script>
    //b.html中设置 window.name的值(需要传输的数据)
    window.name = "我是需要传输的数据,来自 domainB/b.html";
  </script>
</body>
</html>

运行结果：

window.postMessage:跨文档通信 API（Cross-document messaging）

原理：

* HTML5为了解决跨域问题引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
* 这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

* 使用方法: otherWindow.postMessage(message, targetOrigin, [transfer]);
* otherWindow:
* 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
* message:
* 将要发送到其他 window的数据。
* targetOrigin:
* 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI
* 只有当目标窗口与 targetOrigin的源完全相同时消息才能被成功发送,只要协议、主机名、端口其中一项不同消息都不会被发送
* (这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获)
* [transfer]:
* 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

* 父窗口和子窗口都可以通过message事件，监听对方的消息。
* message事件的事件对象event，提供以下三个属性。
* event.source：记录调用 window.postMessage()方法的窗口信息
* event.origin: 表示调用 window.postMessage()方法时,调用页面的当前状态
* event.data: 要发送到其他 window的数据
 
用例：
页面 a.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>a.html</title>
</head>
<body>
  <script>    
    /**
     * 本例中：模拟跨域
     * a.html :  http://localhost/a.html
     * b.html :  http://127.0.0.1/b.html
     */
    
      var popup=window.open("http://127.0.0.1/b.html","title b.html");
      // targetOrigin为:http://127.0.0.1 协议: http 主机名: 127.0.0.1 端口号: 默认(80) 
      // b.html中的域为:http://127.0.0.1 协议: http 主机名: 127.0.0.1 端口号: 默认(80) 
      // 可见目标窗口与 targetOrigin的源完全相同
      popup.postMessage("aaaaaa 在a.html中 通过 postMessage 发送","http://127.0.0.1/b.html"); 
    
    //监听子窗口信息
    window.addEventListener("message",function(event){
      //event.origin: 表示调用 window.postMessage()方法时,调用页面的当前状态
      //在本例中,这里监听的是 b.html中 evnet.source.postMessage()事件,event.source.postMessage()的当前状态还是属于域 http://127.0.0.1
      //console.log(event.origin); //输出: http://127.0.0.1
      if (event.origin !== 'http://127.0.0.1') return;
      console.log(event.data);
    });

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

页面 b.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>b.html</title>
</head>
<body>  
  <script>
    //监听父窗口信息
    window.addEventListener("message",function(event){     
      //event.origin: 表示调用 window.postMessage()方法时,调用页面的当前状态
      //在本例中,这里监听的是 a.html中 popup.postMessage()事件,popup.postMessage()的当前状态还是属于域 http://localhost
      //console.log(event.origin); //输出: http://localhost
      if (event.origin !== 'http://localhost') return;      
      console.log(event.data);
      
      //event.source：记录调用 window.postMessage()方法的窗口信息
      //在本例中,这里监听的是 a.html中 popup.postMessage()事件,因此这里 event.source记录的是 a.html页面窗口的信息
      // targetOrigin为:http:localhost 协议: http 主机名: localhost 端口号: 默认(80) 
      // a.html中的域为:http:localhost 协议: http 主机名: localhost 端口号: 默认(80) 
      // 可见目标窗口与 targetOrigin的源完全相同
      event.source.postMessage("bbbbbb 在b.html中 通过 postMessage 发送","http:localhost");
    });

    //当然也可以使用 window.opener发送信息
    window.opener.postMessage("bbbbbb 在b.html中 通过 window.opener.postMessage 发送","http:localhost");
  </script>
</body>
</html>

运行结果：

跨子域:修改document.domain

原理：两个文档上一层级的域名相同，下一层级(或该层级以下的域名不同)，将两个文档的 document.domain都修改为上一层级的域名(这样他们的 document.domain就一样了)

用例：

      页面一 http://a.test.com/a.html  
        域为: http://a.test.com
        设置该页面的 document.domain=test.com  
        设置 document.cookie= "hello=world"
      页面二 http://b.test.com/b.html  
        域为: http://b.test.com
        设置该页面的 document.domain=test.com  
        这里 console.log(document.cookie) 输出结果包含 "hello=world"

通过反向代理 （Reverse Proxy）

原理：反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。跨域时，页面A 、页面 B不同域，但是页面 A与代理服务器在同一个域，页面 A将请求发送给代理服务器(同一个域)，由代理服务器到页面 B获取所需要的数据(跨域是浏览器阻止跨域，服务器不存在跨域问题)，然后代理服务器将获取的数据返回给页面 A(同一个域)

用例：无

WebSocket 跨域

原理：WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

用例：无

参考：

MDN 官网：https://developer.mozilla.org/

阮一峰博客-浏览器同源政策及其规避方法：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

阮一峰博客-跨域资源共享 CORS 详解：http://www.ruanyifeng.com/blog/2016/04/cors.html

猜你喜欢

转载自www.cnblogs.com/go4it/p/10021551.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022