跨域通信的几种方式

最新推荐文章于 2022-12-31 11:54:27 发布
最新推荐文章于 2022-12-31 11:54:27 发布
阅读量3.7k 收藏 3
点赞数
分类专栏： Web前端 文章标签： 浏览器 jsonp 通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeepLies/article/details/72923428
版权

同源策略里面的 源 指的是：协议、域名和端口。

只要这三者不同就会受到同源策略的影响，在浏览器控制台中，使用console.log(location.origin)，输出的结果便是 源。

IE是一个例外：端口号并未加入到同源策略的组成部分之中。所以http://example.com:8080/和http://example.com属于同源并且不受任何限制。

常用方法

jsonp

  • 服务端 b.com/index.php:
<?php
    $arr=['domain'=>'come from: '.$_SERVER['HTTP_HOST']];
    $callback=$_GET['callback'];
    $json=$callback."(".json_encode($arr).");";
    echo $json;
  • 客户端 a.com/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>jsonp</title>
  <meta charset="UTF-8">
</head>
<body>
  <script>
    var url="http://b.com/index.php?callback=foo";
    //注意 foo函数的定义要先于 引入 url里的内容
    function foo(res){
      console.log(res);
    }

    function loadData(url){
      var elem=document.createElement('script');
      elem.src=url;
      document.getElementsByTagName('head')[0].appendChild(elem);
    }
    loadData(url);
  </script>
</body>
</html>

加载 此页面a.com/index.html，对 b.com/index.php 发起请求，后者将会对前者返回：

foo({domain: "come from: 182.254.152.115:8080"});

于是调用 a.com/index.html 中的 foo() 函数，a.com/index.html 页面所在的控制台输出：

{ domain: "come from: 182.254.152.115:8080" }

jsonp的缺点：
1. 无法在 post请求类型中使用
2. 只能做到动态创建 script标签并读取数据而无法从客户端发出数据

CORS (XMLHttpRequest level 2)

XMLHttpRequest无法跨源通信，但在 XMLHttpRequest level2中 只要服务器端许可就可以实现

  • 服务端 b.com/index.php
<?php
    header('Access-Control-Allow-Origin:http://a.com');
    header('Access-Control-Allow-Credentials:true');
    header('Access-Control-Allow-Methods:POST');
    echo file_get_contents("php://input");
  • 客户端 a.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>jsonp</title>
  <meta charset="UTF-8">
</head>
<body>
<script>
  function foo(res) {
    console.log(res);
  }
  function xhr(url, params, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.withCredentials = true;
    var headerType = typeof params==='string' ? 'application/x-www-form-urlencoded' : 'multipart/form-data';
    xhr.setRequestHeader('Content-Type', headerType);

    if (callback) {
      xhr.onreadystatechange = function () {
        if (xhr.readyState !== 4) {
            return;
        }
        callback(xhr.responseText || '');
      };
    }
    xhr.send(params);
  }
  xhr('http://b.com/index.php', 'id=9999', foo);
</script>
</body>
</html>

加载 此页面a.com/index.html，对 b.com/index.php 发起请求，后者将会对前者返回：

id=9999

于是调用 a.com/index.html 中的 foo() 函数，a.com/index.html 页面所在的控制台输出：

id=9999

postMessage()

语法：

originWindow.postMessage(message, targetOrigin);

originWindow：要发起请求的窗口引用
message: 要发送出去的消息，可以是字符串或者对象
targetOrigin: 指定哪些窗口能够收到消息，其值可以是字符串*（表示无限制）或者一个确切的URI

只有目标窗口的协议、主机地址或端口这三者全部匹配才会发送消息。

  • 父窗口 b.com/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Parent window</title>
</head>
<body>
<div>
    <iframe id="child" src="http://a.com/index.html"></iframe>
</div>
<input id="p_input" type="txet" value="0">
<button onclick='p_add()'>parent click to add</button>

<script type="text/javascript">
    window.addEventListener('message',function(e){
        document.getElementById('p_input').value = e.data;
    });

    function p_add(){
      var p_input = document.getElementById('p_input');
      var value = +p_input.value+1;
      p_input.value= value;
      window.frames[0].postMessage(value,'http://a.com');
    }
</script>
</body>
</html>
  • 子窗口 a.com/index.html
<!doctype html>
<html>
<head>
    <title>Child window</title>
</head>
<body>
  <input id="c_input" type="text" value="0">
  <button onclick='c_add()'>child click to add</button>
<script type="text/javascript">
    var c_input=document.getElementById('c_input');

    window.addEventListener('message', function(e) {
        if(e.source!=window.parent) return;
        var value = +c_input.value+1;
        c_input.value = value;
    });

    function c_add(){
        var value = +c_input.value+1;
        c_input.value = value;
        window.parent.postMessage(value,'http://b.com');
    }
</script>
</body>
</html>

beacon (ping)

ping协议其实是一种很古老的跨域方法。它的本质是利用了浏览器可以获取不同域名下图片的原理，把请求参数放在了图片地址的URL参数中发给后端。

  • 客户端 a.com/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
<script type="text/javascript">
  function foo() {
    console.log('ok');
  }
  function ping(url, callback) {
    var img = new Image();
    var done = function () {
      // 图片实例不需要插入到页面DOM树中，避免了返回图片展示出来被用户看到
      img.onload = img.onerror = img.onabort = null;
      img = null;
      if (callback) {
        callback();
      }
    };
    img.onload = img.onerror = img.onabort = done;
    img.src = url;
  }
  ping('http://b.com/index.php?id=9078', foo);

  // 通过200ms的JS死循环来延迟浏览器关闭，为发送ping请求争取到更多的时间，确保请求发送成功
  var end;
  var delay = 200;
  var now = +new Date();
  for (end = now + delay; now < end;) {
      now = +new Date();
  }
</script>
</body>
</html>
  • 服务端 b.com/index.php
<?php
    header("HTTP/1.1 204 No Content");

submit协议

适合大数据量或者文件的请求发送，需要浏览器支持FormData

  • 客户端 a.com/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
  <form id="form">
    <input type="text" name="text1" value="1">
    <input type="text" name="text2" value="2">
    <input type="submit">
  </form>

<script type="text/javascript">
  function foo() {
    console.log('ok');
  }

  function xhr(url, params, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.withCredentials = true;
    var headerType = typeof params==='string' ? 'application/x-www-form-urlencoded' : 'multipart/form-data';
    xhr.setRequestHeader('Content-Type', headerType);

    if (callback) {
      xhr.onreadystatechange = function () {
        if (xhr.readyState !== 4) {
            return;
        }
        callback(xhr.responseText || '');
      };
    }
    xhr.send(params);
  }

  var formElement = document.getElementById('form');
  formElement.onsubmit = function (e) {
      // 提交时改为XHR提交
      e.preventDefault();
      var formData = new FormData(formElement);
      xhr('http://b.com/index.php', formData, foo);
  };
</script>
</body>
</html>
  • 客户端 b.com/index.php
<?php
    header('Access-Control-Allow-Origin:http://a.com');
    header('Access-Control-Allow-Credentials:true');
    header('Access-Control-Allow-Methods:POST');

如何选择

_jsonpCORSpostMessagebeaconsubmit
提交的数据量大大少(2083字符)少(2048字符)大
支持文件上传不支持不支持不支持不支持支持
页面关闭时发送不支持不支持不支持可以支持(手动设置死循环，锁定浏览器)不支持
浏览器支持程度支持度良好支持度良好部分支持(必须支持 postMessage的浏览器)支持度良好部分支持(必须支持 FormData的浏览器)

从表中可以看出来：
JSONP协议主要适合于拉取数据、获取配置等不需要大数据量提交的操作；
beacon协议则更适用于不要关心返回结果的少数据量提交，尤其适合在页面关闭是发送数据；
submit协议则适用于大数据量的提交，尤其适合文件上传；

Quiet-Night
关注
专栏目录
跨域通信
kobbbb的专栏
03-22 906
今天一早在逛博客园的时候，突然看到一篇关于跨域请求HTTP的文章，进去看了一下，又翻了以前自己遇到的类似的问题，查了一些资料，看了一整个上午，虽然没完完全全的弄懂，但还是小有收获，接下来会继续深入探究。 跨域通信而不受同源策略，其实大家对同源策略应该都很了解的，为了安全起见这也是必须存在的，但当我们需要引入外部资源的时候，这便成为了很大的一道阻碍，不过终究还是办法解决的，好像大家普遍地推崇JSO
使用nginx解决本地环境访问线上接口跨域问题
最新发布
SilenceJude的博客
07-25 1191
前端项目开发过程中，经常会遇到各种各样的跨域问题。虽然大部分时候，由脚手架自带的proxy功能即可解决问题，如webpack，vite等；但是若没有通过脚手架搭建项目，或者必须使用某些特殊规则转发时，使用nginx则能够轻松解决问题。
跨域通信的几种方式及总结
liwb94的博客
12-18 1327
源地址：https://www.cnblogs.com/smyhvae/p/8523576.html 很好的文章 记录一下 总结一下：其实跨域并不会出现问题，跨域的出现只是浏览器为了阻止js读取不同域的响应内容以及限制cookies、LocalStoraged在不同域之间传递。 没有跨域 后端server只要在回应头部‘set-cookie’，那么就会有cookie产生并保存在客户端clie...
浏览器跨域通信
pepping798的专栏
08-21 418
第一种 CORS服务器设置头标 ：设置Access-Control-Allow-OriginAccess-Control-Allow-Origin: http://blog.csdn.net 浏览器，操作类似普通 XHR：var xhr = new XMLHttpRequest(); xhr.open("GET", "/hfahe", true); xhr.send(); 完整浏览器端
[html] 跨域通信有哪些方式？
歌谣的博客
03-22 229
[html] 跨域通信有哪些方式？ JSONP WebSocket CORS Hash postMessage 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
跨域有几种解决方式？原理是什么？跨域.docx
01-06
### 跨域问题及其解决方案 #### 一、跨域概念 在前端开发中，经常会遇到...同时，随着Web技术的发展，还有一些其他的跨域技术也在逐步被开发者所接受和应用，如使用WebSocket等实时通信协议也可规避同源策略的限制。
探讨跨域请求资源的几种方式（总结）
09-01
以下是几种常见的跨域请求方式： 1. **JSONP(JSON with Padding)**: JSONP是一种利用`<script>`标签不受同源策略限制的特性进行跨域请求的方法。它依赖于前端和后端的协同工作。前端创建一个`<script>`标签，其`...
跨域请求的几种方式
12-27
### 跨域请求的几种方式 #### 一、前言 在现代Web开发中，由于浏览器的安全机制——同源策略，对于跨域请求的支持成为了一个常见的需求。所谓跨域，是指当请求的目标URL与当前页面地址在协议、域名、端口三者中...
HTML5窗口间同域和跨域的通信
七月
10-12 1143
HTML5窗口间同域和跨域的通信   前端页面间的通讯问题： 页面和其他打开的新窗口的数据传递 多窗口之间消息传递 页面与嵌套的iframe消息传递     同域页面之间的通讯： 通过发起的url进行通讯； 通过本地存储或者cookie进行实现；   跨域页面之间的通讯： 可以通过发起的url进行通讯； 通过html5的window.postMessage()和window.o...
Web API 配置和服务
o_b_j_e_c_t的博客
06-14 678
// Web API 配置和服务 GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear(); <httpProtocol> <customHeaders> <!--响应类型 (用逗号隔开，对预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表GET,HEAD,POST,PUT,DELETE,CONNECT,O
ajax跨域问题（前后端分离项目）
逗比程序猿^_^的博客
10-08 433
Ajax跨域 域：协议+IP+端口 http://localhost:8989 http://localhost:8080 http://www.baidu.com:80 1.安全问题 摘自互联网： 为什么AJAX访问不能跨域呢？要讲清楚这个问题，首先要谈谈Cookie 1.客户向A网站的服务器发送登录请求，并携带账号密码数据 2.A网站的服务器校验账号密码正确后，返回响应并给本地添加了Co...
解决跨域的8种最常用方法（附终极通用大招）
小白目的博客
05-21 7380
目录 引言 一、JSONP 跨域 二、 iframe跨域 2.1 window.name + iframe跨域 2.2 location.hash + iframe跨域 2.3 document.domain + iframe跨域 三、postMessage 跨域 四、nginx反向代理跨域 五、nodejs 中间件代理跨域 六、前端正向代理跨域 七、WebSocket协议跨域 引言 上文中提到了cors 解决跨域的方法，除此之外还有很多。 一、JSONP 跨域 ...
跨域问题（三种解决方法）
weixin_47414034的博客
12-31 5605
两个请求的协议（比如http），域名（比如说localhost或者192.168.0.0），端口号三者一模一样（其他可以不一样）才算两个请求在同一个域内，三者但凡有一个不一样都是跨域。跨域就是一个域名的网页去请求另一个域名的资源，比如你刚刚在A网站输入了自己的账号密码，然后访问B网站，B网站无法获取账号密码。比如现在前端工程想要访问后端工程中的list方法，只需要在这个方法上面添加@CrossOrigin注解即可。其实后端是有接收到请求，也给前端工程返回了数据，但是浏览器收到之后拒绝前端读取响应数据。
解决跨域问题
12-16 4001
跨域、同源策略是什么 什么是跨域？ 定义：跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域同源策略 所谓同源是指，域名，协议，端口均相同。 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。 概念：只要协议、域名、端
解决跨域的三种方案
m0_70477767的博客
05-03 5028
解决跨域的三种方案 到目前为止，我们编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求 解决接口跨域问题的方案主要有三种 CORS (主流的解决方案，推荐使用) 反向代理 (推荐使用) JSONP (有缺陷的解决方案：只支持 GET 请求) 3.代码演示 <!DOCTYPE html> <html lang="en"> ​ <head> <meta charset="UTF-8"> .
Nginx完美解决前后端分离端口号不同导致的跨域问题
qq_42702331的博客
07-20 5591
nginx跨域问题，前端请求后端接口状态码为0
浏览器的跨域几种解决方式
06-08
浏览器的跨域问题是由于浏览器的同源策略引起的，同源策略规定了浏览器只能向同一个域名下的服务器发送请求。跨域问题是指当浏览器向一个不同域名下的服务器发送请求时，该请求会被浏览器拦截。为了解决跨域问题，常见的解决方式如下： 1. JSONP：通过在页面中添加一个 `<script>` 标签，可以利用 `src` 属性向不同域名的服务器发送请求，而该请求返回的数据会被包裹在一个函数调用中，从而实现跨域数据传输。 2. CORS：CORS 是一种跨域资源共享机制，通过在服务器端设置响应头中的 `Access-Control-Allow-Origin` 字段，可以允许特定域名下的浏览器请求该服务器上的资源。 3. 代理：可以在同域名下的服务器上设置一个代理服务器，将浏览器请求转发到目标服务器上，从而实现跨域请求。 4. postMessage：HTML5 中提供了 `postMessage` 方法，可以在不同的窗口或 iframe 之间传递数据，从而实现跨域数据传输。 5. WebSocket：WebSocket 是一种基于 TCP 协议的全双工通信协议，通过 WebSocket 可以在不同域名下的服务器之间建立长连接，从而实现跨域通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值