解决跨域问题:

1. document.domain + iframe      (只有在主域相同的时候才能使用该方法)

  document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

2. 动态创建script

function loadScript(url, func) {var head = document.head || document.getElementByTagName('head')[0];var script = document.createElement('script');script.src = url;script.onload = script.onreadystatechange = function(){if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){func();script.onload = script.onreadystatechange = null;}};head.insertBefore(script, 0);
}
window.baidu = {sug: function(data){console.log(data);}
}
loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
//我们请求的内容在哪里?
//我们可以在chorme调试面板的source中看到script引入的内容

3.location.hash + iframe

  原理是利用location.hash来进行传值。

  假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。
    1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面
    2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
    3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获取hash值
    注:由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe

 4.使用window.name来进行跨域

  window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

  window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

 5.使用HTML5中新引进的window.postMessage方法来跨域传送数据

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

  调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

 6.JSONP

  JSONP包含两部分:回调函数和数据。

  回调函数是当响应到来时要放在当前页面被调用的函数。(callback)

  数据就是传入回调函数中的json数据,也就是回调函数的参数了。

  function handleResponse(response){console.log('The responsed data is: '+response.data);}var script = document.createElement('script');script.src = 'http://www.baidu.com/json/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);/*handleResonse({"data": "zhe"})*///原理如下://当我们通过script标签请求时//后台就会根据相应的参数(json,handleResponse)//来生成相应的json数据(handleResponse({"data": "zhe"}))//最后这个返回的json数据(代码)就会被放在当前js文件中被执行//至此跨域通信完成

jsonp虽然很简单,但是有如下缺点:

1)安全问题(请求代码中可能存在安全隐患)

2)要确定jsonp请求是否失败并不容易

 7. web sockets

  web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

  web sockets原理:在js创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

  只有在支持web socket协议的服务器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){var data = event.data;
}
  

  

转载于:https://www.cnblogs.com/xin0616/p/7249419.html

web前端-----跨域相关推荐

  1. Web前端——跨域问题

    目录 1.跨域问题 2.为什么要跨域? 演示跨域问题 3.利用jsonp进行跨域 演示jsonp跨域 演示用jQuery的方式发送jsonp请求 简化方法发送jsonp 4.用cros进行跨域 cro ...

  2. web前端跨域问题解决

    1.什么是跨域         对同域(同源)概念的理解:域名相同,端口相同,协议相同. 对同源策略概念的理解:所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host ...

  3. WEB 前端跨域解决方案

    跨域定义 广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...

  4. web漏洞挖掘指南-前端跨域漏洞

    web漏洞挖掘指南 前端跨域漏洞 一.何为跨域 1.设想一种场景,一个恶意网站上嵌入了一个iframe标签去加载银行的登陆页面,高度和宽度的设置和真实的银行官网一样,当用户访问恶意网站并登录时,攻击者 ...

  5. 前端跨域问题解决方案汇总

    下面我以简单的两台node服务器来说明如何使用nginx进行前端跨域访问. node1服务器 在localhost:8083上启动 const app = express(); app.get('/w ...

  6. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的 ...

  7. 前端跨域请求原理及实践(加qq群:342430957)

    一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端 ...

  8. 前端战五渣学前端——跨域

    跨域(Cross-Origin) 这几年的工作.面试中,还遇到一个不能回避的问题,那就是跨域,一般面试的时候会问你'怎么解决跨域问题','跨域是什么','为什么会有跨域'等类似的问题.前段时间后端大佬 ...

  9. 前端跨域方案看这篇就够了

    文章目录 前言 跨域解决的方法 1.JSONP 2.CORS跨域资源共享 3.http proxy => webpack webpack-dev-server 4.nginx反向代理 5.pos ...

最新文章

  1. 通用AI咋发展?向大脑学习是条路子
  2. [原理篇] 逻辑回归
  3. Java NIO系列教程(四) Scatter/Gather
  4. mysql 经典入门教程_MySQL 经典入门教程
  5. 在网络中配置思科交换机
  6. 未来十大技能职场吃香
  7. c# 插入树形数据#_C#数据类型能力问题 套装1
  8. 【图像处理基础知识】-傅里叶变换
  9. 在网页中引用js文件、css文件或图片文件时为什么要加上问号+值或key-value
  10. 最近在做中文的全文检索(中文搜索引擎)
  11. 2022爱分析・汽车行业数字化实践报告
  12. 基于C++实现校园卡管理系统
  13. Mysql 分页,排序 打字练习
  14. (Scikit-Learn)线性回归 基函数的含义详解
  15. Vue 项目路由出现 message: “Navigating to current location (XXX) is not allowed“的问题
  16. FPGA series # 基于SDx的fft函数加速
  17. 使用python对字符串进行md5加密
  18. 根据json 动态生成页面——问卷页面
  19. GDAL之OGR入门
  20. 一看就懂的i++和++i详解

热门文章

  1. 虚拟机VMware Workstation与主机间共享文件(利用虚拟光驱)
  2. 【操作系统】—线程概念和多线程模型
  3. JavaScript学习(四十九)—构造方法、原型、对象图解
  4. python qt5 数据改变 触发信号_pyqt5自定义信号实例解析
  5. r语言调用python_python如何调用R
  6. Curie Module是什么
  7. 五千的手机和两三千的手机使用起来有什么不一样?有必要买贵的吗?
  8. 历史上的甲子年灾难有哪些?
  9. 职场上,领导更愿意提拔什么样的下属?
  10. 有哪些行业或生意是电商无法取代的?