web前端-----跨域
解决跨域问题:
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前端-----跨域相关推荐
- Web前端——跨域问题
目录 1.跨域问题 2.为什么要跨域? 演示跨域问题 3.利用jsonp进行跨域 演示jsonp跨域 演示用jQuery的方式发送jsonp请求 简化方法发送jsonp 4.用cros进行跨域 cro ...
- web前端跨域问题解决
1.什么是跨域 对同域(同源)概念的理解:域名相同,端口相同,协议相同. 对同源策略概念的理解:所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host ...
- WEB 前端跨域解决方案
跨域定义 广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
- web漏洞挖掘指南-前端跨域漏洞
web漏洞挖掘指南 前端跨域漏洞 一.何为跨域 1.设想一种场景,一个恶意网站上嵌入了一个iframe标签去加载银行的登陆页面,高度和宽度的设置和真实的银行官网一样,当用户访问恶意网站并登录时,攻击者 ...
- 前端跨域问题解决方案汇总
下面我以简单的两台node服务器来说明如何使用nginx进行前端跨域访问. node1服务器 在localhost:8083上启动 const app = express(); app.get('/w ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的 ...
- 前端跨域请求原理及实践(加qq群:342430957)
一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端 ...
- 前端战五渣学前端——跨域
跨域(Cross-Origin) 这几年的工作.面试中,还遇到一个不能回避的问题,那就是跨域,一般面试的时候会问你'怎么解决跨域问题','跨域是什么','为什么会有跨域'等类似的问题.前段时间后端大佬 ...
- 前端跨域方案看这篇就够了
文章目录 前言 跨域解决的方法 1.JSONP 2.CORS跨域资源共享 3.http proxy => webpack webpack-dev-server 4.nginx反向代理 5.pos ...
最新文章
- 通用AI咋发展?向大脑学习是条路子
- [原理篇] 逻辑回归
- Java NIO系列教程(四) Scatter/Gather
- mysql 经典入门教程_MySQL 经典入门教程
- 在网络中配置思科交换机
- 未来十大技能职场吃香
- c# 插入树形数据#_C#数据类型能力问题 套装1
- 【图像处理基础知识】-傅里叶变换
- 在网页中引用js文件、css文件或图片文件时为什么要加上问号+值或key-value
- 最近在做中文的全文检索(中文搜索引擎)
- 2022爱分析・汽车行业数字化实践报告
- 基于C++实现校园卡管理系统
- Mysql 分页,排序 打字练习
- (Scikit-Learn)线性回归 基函数的含义详解
- Vue 项目路由出现 message: “Navigating to current location (XXX) is not allowed“的问题
- FPGA series # 基于SDx的fft函数加速
- 使用python对字符串进行md5加密
- 根据json 动态生成页面——问卷页面
- GDAL之OGR入门
- 一看就懂的i++和++i详解