首页 / JAVASCRIPT / Javascript几种跨域方式

Javascript几种跨域方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript几种跨域方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7420字，纯文字阅读大概需要11分钟。

内容图文

在客户端编程语言中如javascript，同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。只有当两个域具有相同的协议，相同的主机，相同的端口时，我们就认定他们是相同的域。可是在实际开发中我们经常需要获取其他域的资源，这个时候各种不同的跨域资源方式就各显神通了，今天主要来总结一下工作中常用的几种跨域方式，以备查询。

1.window.name

window 对象的name属性是一个很特别的属性，当在 frame 中加载新页面时，name 的属性值依旧保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，此时 name 属性值可被获取到，以访问 Web 服务发送的信息。但 name 属性仅对相同域名的 frame 可访问。这意味着为了访问 name 属性，当远程 Web 服务页面被加载后，必须导航 frame 回到原始域。即页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。一旦 name 属性获得，销毁 frame 。这个方式非常适合单向的数据请求，而且协议简单、安全。

页面B(www.jesse.com/data.html)代码如下：

<script type="text/javascript">
window.name = 'I was there!';
// 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
// 数据格式可以自定义，如json、字符串
</script>

页面A(www.jack.com/index.html)代码如下：

<script type="text/javascript">
var state = 0,
  iframe = document.createElement('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = iframe.contentWindow.name; // 读取数据
      console.log(data); //弹出'I wasthere!'
      (function(){
        //获取数据以后销毁这个iframe。
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
      })();
    } else if (state === 0) {
      state = 1;
      // 设置的代理页面使其回原始域
      iframe.contentWindow.location = "http://www.jack.com/proxy.html"; 
    }
  };
iframe.src = 'http://www.jesse.com/data.html';
if (iframe.attachEvent) {
  iframe.attachEvent('onload', loadfn);
} else {
  iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

2.具备src的标签

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中用标签的src属性引用其他域的文件。根据这一点，可以方便地通过创建具有src属性的节点方法来实现完全跨域的通信。使用这种原理的跨域方式有以下几种：

动态创建script

例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。

pageA(www.jack.com/index.html)代码如下：

function getData(data){
  //这里是对获取的数据的相关操作
  console.log(data);
  //数据获取到后移除创建的script标签
  document.body.removeChild(originData);
}
var originData = document.createElement('script');
originData.src = 'http://www.jesse.com/data.js';
originData.setAttribute("type", "text/javascript");
document.body.appendChild(originData);

pageB(www.jesse.com/data.js)代码如下：

getData('这里是远程跨域获取的数据');//数据格式可以自定义，如json、字符串

jsonp

在用$.ajax()获取远程数据时，如果是跨域资源则可以使用jsonp方法，以前一直以为jsonp是ajax的一种，后来才明白他们根本就不是一回事。ajax是以xhr方式请求数据的，而jsonp是以script方式请求数据的，这个就是和上面的动态创建script方式一样。

pageA(www.jack.com/index.html)代码如下：

$.ajax({
  //JSONP不支持POST方式
  type:"GET",
  url:"http://www.jesse.com/data.php",
  dataType:"jsonp",
  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  jsonpCallback:"getData",
  success: function(data){
    console.log(data);
  },
  error: function(){
    console.log('fail');
  }
})

pageB(www.jesse.com/data.js)代码如下：

<?php
  $callback = $_GET['callback'];//得到回调函数名,这里是getData
  $data = array('a','b','c');//要返回的数据
  echo $callback.'('.json_encode($data).')';//

输出 ?>

3.document.domain

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.gxlcms.com/和http://www.gxlcms.com/两个文件中分别加上 document.domain = "a.com"；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以 “交互”了。当然这种办法只能解决主域相同而二级域名不同的情况

www.a.com上的a.html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  // 在这里操纵b.html
  alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html

document.domain = 'a.com';

4.跨域资源共享（CORS）

原理:跨源资源共享(CORS)定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。它是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等)，来限制哪些域的请求和哪些请求类型可以接受，而客户端在发起请求时必须声明自己的源(Orgin)，否则服务器将不予处理，如果客户端不作声明，请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较，只有同域的请求才会处理。

pageA(www.jack.com/index.html)代码如下：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
  }
};
xhr.open("get","http://www.jesse.com/data.php");
xhr.send(null);

pageB(www.jesse.com/data.php)代码如下：

<?php
  header("Access-Control-Allow-Origin: http://www.gxlcms.com/");//与简单的请求相同
  header("Access-Control-Allow-Methods: GET, POST");//允许请求的方法
  header("Access-Control-Max-Age: 3628800"); //将这个请求缓存多长时间
  $data = array('a','b','c');//要返回的数据
  echo json_encode($data);//

输出 ?>

5.window.postMesage 不常用

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

pageA(www.jack.com/index.html)代码如下：

<iframe id="proxy" src="http://www.jesse.com/index.html" onload="postMsg()" style="display: none"></iframe>
<script type="text/javascript">
var obj = {
  msg: 'hello world'
}

function postMsg() {
  var iframe = document.getElementById('proxy');
  var win = iframe.contentWindow;
  win.postMessage(obj, 'http://www.jesse.com');
}
</script>

pageB(www.jesse.com/data.php)代码如下：
<script type="text/javascript">
window.onmessage = function(e) {
  console.log(e.data.msg + " from " + e.origin);
}
</script>

6. location.hash 不常用

pageA(www.jack.com/index.html)代码如下：

function startRequest() {
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.jesse.com/b.html#sayHi'; //传递的location.hash 
  document.body.appendChild(ifr);
}

function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is ' + data);
    }
  } catch (e) {};
}
setInterval(checkHash, 5000);
window.onload = startRequest;

pageA(www.jack.com/proxy.html)代码如下：

parent.parent.location.hash = self.location.hash.substring(1);

pageB(www.jesse.com/b.html)代码如下：

function checkHash() {
  var data = '';
  //模拟一个简单的参数处理操作
  switch (location.hash) {
    case '#sayHello':
      data = 'HelloWorld';
      break;
    case '#sayHi':
      data = 'HiWorld';
      break;
    default:
      break;
  }
  data && callBack('#' + data);
}

function callBack(hash) {
  // ie、chrome的安全机制无法修改parent.location.hash，所以要利用一个中间的www.a.com域下的代理iframe
  var proxy = document.createElement('iframe');
  proxy.style.display = 'none';
  proxy.src = 'http://www.jack/c.html' + hash; // 注意该文件在"www.jack.com"域下
  document.body.appendChild(proxy);
}
window.onload = checkHash;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多Javascript几种跨域方式相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的Javascript几种跨域方式全部内容，希望文章能够帮你解决Javascript几种跨域方式所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/302448.html

来源：【匿名】

【上一篇】浏览器UI多线程及对JavaScript单线程底层运行机制的理解【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript几种跨域方式】教程文章相关的互联网学习教程文章

Javascript Ajax总结——其他跨域技术之Comet【代码】

Comet指一种更高级的Ajax技术（也称 “服务器推送” ），一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上，非常适合体育比赛的分数和股票报价。有两种实现Comet的方式：长轮询、流传统轮询（也称短轮询），即浏览器定时向服务器发送请求，看有没有更新的数据。长轮询把短轮询颠倒了一下。页面发起一个到服务器的新请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接...

分析JavaScript的跨域原理（jsonp）

前段时间给朋友分析了下常用的jsonp的跨域原理，跨域的方式有很多种，这里简单记录一种jsonp，阐述一下分析思想，分析过程，找到解决问题的方式。 1.JavaScript怎么跨域 2.为什么会出现跨域问题 3.常用的跨域插件是什么 4.为什么<script src=""></script>不会产生跨域问题 5.java后台跨域的处理是什么原理跨域方式？（1） document.domain+iframe的设置...

JS跨域【代码】

客户端 localjs.php 页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-1.9.0.js"></script> <script type="text/javascript"> //原始jsonP跨域方法functi...

说一说javascript跨域和jsonp【代码】【图】

同源策略在浏览器的安全策略中“同源策略”非常如雷贯耳，说的是协议、域名、端口相同则视为同源，域名也可换成IP地址，不同源的页面脚本不能获取对方的数据。要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据，浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”.因为同源策略的存在，防止了跨域访问的安全问题，但同时也损失了方便获取资源的便利。跨域的src属性世事又非绝对，浏览器还是允...

前后端分离每次请求session不一致JSESSIONID不一致，跨域【代码】

前后端分离每次请求session不一致JSESSIONID不一致，跨域Google浏览器解决步骤： ①在浏览器地址栏里输入下述命令：chrome://flags/ ②找到下面两个列表项目：（1）SameSite by default cookies （2）Cookies without SameSite must be secure 将这两项设置成disabled，并重启谷歌浏览器。再次使用，cookie中也成功写入了JSESSIONID。一切恢复正常！原文：https://www.cnblogs.com/biyesheji/p/15219648.html

问卷项目--js跨域

项目中因为要把问卷投放到第三方，并且对方要收集统计数据，因此在调用对方接口的时候就会存在跨域的问题。1. 什么叫js跨域浏览器不允许javascript跨域请求其他域名下的内容。端口号不同，主域相同子域不同，协议不同，不同域名等等情况下面表格里的a.js是无法获取b.js的内容的。情况举例端口号不同http://www.baidu.com/a.js vs. http://www.baidu.com:8080/b.js主域相同子域不同http://www.baidu.com/a.js vs. htt...

【转载】Ajax JS 跨域请求

原文：简单的ajax请求：http://blog.csdn.net/net_lover/article/details/5172509复杂的ajax请求：http://blog.csdn.net/net_lover/article/details/5172522 什么样的请求算是简单请求呢？简单请求必须满足下面2点：a，只使用 GET、POST 进行的请求，这里的POST只包括发送给服务器的数据类型（Content-Type）必须是 application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。b，HTTP 请求没有设置自定义的请...

javascript跨域问题【图】

现在很多人特别是前端开发人员，在ajax请求，XMLHttpRequest的过程中会碰到一个问题，那就是跨域请求：当我们javaScript脚本试图跨域访问时，浏览器会告诉你类似于No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.的消息。可是我有时候又有跨域请求的强烈需求，比如需要去别的网站抓取一些数据（当然现在有很多方法来支持跨域，但这不是本文要讲的内容）。原来这是浏览器的一个策略----“同源策略...

原生JavaScript封装的jsonp跨域请求【代码】

原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>跨域的jsonp请求</title> </head> <body><script>(function(window,document){//该函数接受三个参数，请求的地址，请求的数据（对象格式），回调函数// 回调函数可接受一个参数用来返回请求到的信息var jsonp = function(url,data,callback){// 第一步：挂载回调函数//cbFuncName为回调函数名var cbFuncName = "my_jsonp_...

在vue项目中,使用axios跨域处理【图】

下面我就为大家分享一篇在vue项目中,使用axios跨域处理，具有很好的参考价值，希望对大家有所帮助。跨域，一个很是让人尴尬的问题，有些人可以在后台中设置请求头，但是很多前端并不具备后台的知识，并无法自己独立的搭建一个服务器，所以就变成了一个尴尬的事情当然，有很多的虚拟服务器，能够解决跨域问题，他们的实质都是通过后台取与后台沟通，从而委婉的解决跨域问题正好，webpack正有这种功能，所以vue-cli也是有解决跨域的能...

原生javascript封装类似jquery的ajax请求跨域函数【代码】

function ajax(opt) {opt = opt || {}; // 对实参处理var xmlhttp, method, url, async, dataType, data;method = opt.method || GET; // 默认method为GETmethod = trim(method).toUpperCase(); //转换成大写并去除空格url = opt.url //请求地址url = trim(url);async = opt.async || true; ...

Vue-cli3.x + axios 跨域方案踩坑指北

缘起最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的...

VUE axios发送跨域请求需要注意的问题【图】

在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求关于跨域跨域的概念这些就不说了，百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题，以纪念在逝去的几个小时中资料查找的艰辛。不多说，直接上代码~~~~ 同理，跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理)： public function handle($request, Closure $next){if ($request->isMethod(OPTIONS)) {$response...

vue中axios实现数据交互与跨域问题【代码】

1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的。所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。下载地址：https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.jsaxios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。增 post 删 delete 改 put 查 get/...

详解在Vue中如何使用axios跨域访问数据【图】

最近在项目中需要用到axios，所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品，官网也说了，以后都用axios， vue-resource不在维护。那么这个axios怎么用呢，上网搜索了一大堆，基本上都是雷同，我也不知道那些作者有没有在本地测试过。至少我按照网上的做法，总不能成功。经过几天的奋斗，我终于把它搞清楚了，为了不让其他的小伙伴们走弯路，我把我在实际操作中的例子分享给大家，希望对大家有用。一、安...

首页 / JAVASCRIPT / Javascript几种跨域方式

Javascript几种跨域方式

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript几种跨域方式】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程