第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
2. 前端解决跨域问题
1>document.domain + iframe (只有在主域相同的时候才能使用该方法)
1) 在a/a中:
复制代码
document.domain = 'a'
var ifr = document.createElement('iframe')
ifr.src = 'script.a/b'
ifr.display = none
document.body.appendChild(ifr)
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document
在这里操作doc,也就是b
ifr.onload = null
}
复制代码
2) 在script.a/b中:
document.domain = 'a'
2>动态创建script
这个没什么好说的,因为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=='plete'){
func()
script.onload = script.onreadystatechange = null
}
}
head.insertBefore(script......>>
问题二:如何解决跨域问题 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。
不知是跨域问题
起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统;调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像什么都没有发生一样。这样反反复复改来改去好久都没能解决,于是求救同事,提醒可能是ajax跨域问 题,于是就将这个问题当做跨域问题来解决了。
知跨域而不知如何解决
知道问题的确切原因,剩下的就是找到解决问题的方法了。google了好久,再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。
找到一种解决方式
现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。
首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:
复制代码
$(document).ready(function(){
var url='localhost:8080/...upById
+?id=1&callback=?'
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name)
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status)
alert(XMLHttpRequest.readyState)
alert(textStatus)
}})
})
复制代码
这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。
比较一下json与jsonp格式的区别:
json格式:
{
message&q......>>
问题三:跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识 跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者baidu 要访问xxx 也是不同域名 也是跨域
HTML5 里有个window.postMessage 方法,支持跨域访问,详情可以参考
webhek/window-postmessage-api
如果你的程序在服务器上,也可以进行相应的操作来完成跨域访问
纯手打 有问题欢迎咨询
问题四:如何解决跨域问题 打开IE浏览器,在工具菜单下选择Internet选项,打开Internet选项卡
切换到安全选项卡下,点击可信站点,然后单击站点按钮
可信站点窗口输入网址到可信站点的区域,点击添加按钮,网址则会添加到网站列表下,最后关闭可信站点窗口
还是在安全选项卡下的可信站点,点击自定义级别
打开受信任的站点区域窗口,找到跨域浏览窗口和框架选择启用
在当前窗口中继续往下翻,通过域访问数据源也选择启用,点击确定关闭受信任的站点区域窗口
在Internet窗口也点击确定按钮,同时关闭浏览器
在请求的js脚本中添加是否允许跨域访问的权限,jQuery.support.cors默认值为true,则代表允许;反之,不允许。设置完成,重新打开浏览器验证即可
问题五:$跨域请求怎么解决 post请求进行跨域
angularjs内置封装了类ajax的网络服务$,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$({
method: 'POST',
url: 'localhost:8000',
headers: {
'Content-Type' : 'application/x--form-urlencoded'
},
data: {
myUrl: 'c.m.163/...0'
}
}).then(function success(result) {
数据请求成功
console.log(result.data)
},function error(err) {
数据请求失败
console.log(err)
})
}
}
注意:表面上是向$中传入了一个回调函数提供相应时调用,实际是返回了一个promise对象,angular1.2以上的版本对$进行了优化
优化后:
$scope.main = {
getData: function () {
var myUrl = 'c.m.163/...0'
var url = 'localhost:8000'
var promise = $({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
......>>
问题六:如何解决跨域问题 关于跨域名问题还是问题么,这方面的解决实践非常多,今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下(转帖请注明出处:blog.csdn/lenel)
先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript
场景一:将bbs.xxx的页面用iframe嵌入到xxx的中,如何在iframe内外使用js通信(转帖请注明出处:blog.csdn/lenel)
一级域名都是xxx 这个域名一定是在您的控制下,所以你只要在两个页面中同时升级域名即可
在父窗口和iframe内部分别加上js语句:document.domain=xxx
之后2个页面就等于在同一域名下,通过window.parent oIframe.contentDocument就可以相互访问,进行无障碍的JS通信
在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定,只能向上升级,从bbs.xxx升级到yyy肯定会出错
场景二:将yyy的页面用iframe嵌入到xxx的中,两个域名都在您的控制下,如何在iframe内外进行一定的数据交流(转帖请注明出处:blog.csdn/lenel)
你可以通过相互改变hash值的方式来进行一些数据的通信
这里的实现基于如下技术要点:
1、父窗口通过改变子窗口的src中的hash值把一部分信息传入,如果src只有hash部分改变,那么子窗口是不会重新载入的。
2、
子窗口可以重写父窗口的location.href,但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名,知
道当前父窗口的location.href是什么并写在子窗口内,这样通过parent.location.href =
已知的父窗口的href+#+hash。这样父窗口只有hash改变也不会重载。
3、上面两步分别做到了两个窗口之间的无刷新数据通知,
那么下面的来说如何感知数据变化。标准中没有相关规定,所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事
......>>
问题七:如何解决javascript的跨域问题 一般是用iframe设置
document.domain = 'a'var ifr = document.createElement('iframe')ifr.src = 'a/index'ifr.style.display = 'none'document.body.appendChild(ifr)ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.documentconsole.log(doc.documentElement.innetHTML)}然后HTML5新特性有 ,postMessage
function Init () { if (window.addEventListener) { all browsers except IE before version 9 window.addEventListener (message, OnMessage, false)} else { if (window.attachEvent) { IE before version 9 window.attachEvent(onmessage, OnMessage)} } } function GetState () { var frame = document.getElementById (myFrame)var message = getstate参数if (frame.contentWindow.postMessage) { 传递的参数,后面是传递的你的跨域域名frame.contentWindow.postMessage (message, *)} } function OnMessage (event) { console.log(event.data)} document.body.onload=function(){Init()GetState()}
问题八:如何解决跨域问题 VPN或者域名
问题九:如何解决请求跨域的问题 jsonp 是写 script 标签,只能满足 get 请求。跨域 post 的话,IE8 及以上和其他主流浏览器可以用 window.postMessage 来实现,也就是传说中的 HTML5 方法了,可以看下标准,代码很简单。IE6、7 就用老式的方法
问题十:怎么解决服务器间的跨域问题 服务端的解决方案的基本原理就是,由客户端将请求发给本域服务器,再由本域服务器的代理来请求数据并将响应返回给客户端。
最常用的服务器解决方案就是利用web服务器本身提供的proxy功能,如apache和ligd的mod_proxy模块。在百度内 部,tran *** it的分流功能也可以解决部分跨域问题。但这些方法都有一定的局限性,鉴于安全性等问题的考虑,space这边最后开发了一个专门用于处
理跨域请求代理服务的spproxy模块,用于彻底解决js跨域问题。
下面我们将以空间的开放平台为例,简单介绍下如何通过apache的mod_proxy、tran *** it的分流以及space的spproxy模块来解
决该跨域问题,并简单介绍下spproxy的一些特性、缺点及下一步的改进计划。
空间在展现每个UWA开放模块之前都必须请求该模块的xml源代码以进行解析,每个模块的源代码文件都是存放在act域下的/ow/uwa目录下,那么在
用户空间首页(hi域)中请求该xml文件时就会存在js跨域问题。要解决该问题,只能让js向hi域的web服务器请求xml文件,而hi域web服务
器则通过一定的代理机制(如mod_proxy、tran *** it分流、spproxy)向act域的web服务器请求文件
当互相访问过程中,访问协议、ip地址、端口号有一个不同,就会造成跨域问题
http和https属于跨域
www.jd.com 与 www.taobao.com
item.jd.com 与 miaosha.jd.com
www.jd.com:8080 与 www.jd.com:8081
或者如从localhost:1000去访问localhost:8888,这属于端口不同,跨域了。
如果域名和端口都相同,但是请求路径不同,不属于跨域,如:
www.jd.com/item
www.jd.com/goods
跨域不一定都会有跨域问题。
因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击。
因此:跨域问题 是针对ajax的一种限制。
但是这却给我们的开发带来了不便,而且在实际生产环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?
在controller上面加注解@CrossOrigin
跨域?他是浏览器的 同源策略 造成的,是浏览器对javascript施加的安全限制。所谓同源是指:域名、协议、端口均相同。
解决
原理:利用标签具有可跨域的特性,可实现跨域访问接口,需要后端的支持。
服务器在收到请求后,解析参数,计算返还数据,输出messagetow(data)字符串。
缺点:只能发送get请求,无法访问服务器的响应文本(单向请求),即只能获取数据不能改数据。
通过ajax请求不同域的实现,底层不是靠XmlHttpRequest而是script,所以不要被这个方法给迷惑了。
在ajax请求中类型如果是type是get post,其实内部都只会用get,因为其跨域的原理就是用的动态加载script的src,所以我们只能把参数通过url的方式传递
其实jquery内部会转化成
http://192.168.31.137/train/test/jsonpthree?callback=messagetow
然后动态加载http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"><script type="text/javascript" src=" http://192.168.31.137/train/test/jsonpthree?callback=messagetow "></script>
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:
跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:
window.name通过在iframe(一般动态创建i)中加载跨域HTML文件来起作用。然后,HTML文件将传递给请求者的字符串内容赋值给window.name。然后,请求者可以检索window.name值作为响应。
iframe标签的跨域能力;
window.name属性值在文档刷新后依旧存在的能力(且最大允许2M左右)。
每个iframe都有包裹它的window,而这个window是top window的子窗口。 contentWindow 属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。
HTML5新特性,可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent,如果在函数执行的过程中调用了它,就会让后面的函数超时无法执行。
前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域,所以只能跨子域
在 根域 范围内,允许把domain属性的值设置为它的上一级域。例如,在”aaa.xxx.com”域内,可以把domain设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。
现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面,由于其document.name不一致,无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将document.name = 'xxx.com'设置一致,来达到互相访问的作用。
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很棒的实现。相关文章,请查看: WebSocket 、 WebSocket-SockJS
**需要注意:**WebSocket对象不支持DOM 2级事件侦听器,必须使用DOM 0级语法分别定义各个事件。
同源策略是针对浏览器端进行的限制,可以通过服务器端来解决该问题,例如nginx
DomainA客户端(浏览器) ==>DomainA服务器 ==>DomainB服务器 ==>DomainA客户端(浏览器)
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)