JavaScript常见跨域思路代码
来源:互联网 发布:旅游大数据应用 编辑:程序博客网 时间:2024/06/05 20:50
注明出处格式:前端开发博客 (http://caibaojian.com/javascript-crossdomain.html)
那么我们另外一个域是如何来调用上面那个回调函数的呢?前面我们已经提到过iframe这个东西,那它又干些什么呢,其实很简单,只是利用iframe里面的src属性,在属性里面我们填写的是bbb页面的url路径,同时iframe只是协助作用,我们又不想看到它,所以我们这么做,把它给display:none掉!来,我们看下代码:
看到这里,应该明白了为什么我们传入的回调函数为啥要处理一下,让它产生随机名称,接着把这个随机名称作为window的属性给它存储起来,同时让这个window属性指向callback,到这里我们就相当于给匿名函数起了一个名,这样后台就可以调用得到啦!
最后面我们执行了一个onload来实现删除script标签。到这里我们也解决了跨域问题了,有没有惊呆了,难道这么简单?没错,就是这么简单。
这里面有一个关键点:就是url后面要跟一个函数名等于?这样一个参数,只有这样getJSON()才是以jsonp的形式发起;当然如果你没有跟上一个函数名等于?这样一个参数,那么就认为它只是同域中的ajax请求,是无法完成跨域的。
这边跟getJSON()的差别主要是定义了dataType的类型为jsonp类型,其他地方都是一样的。其实它还可以这么写,我们先看代码,在解释原因:
这种方法是使用jsonp和jsonpCallback来代替上面的callback匿名函数,jsonp指定的是函数的名称,就如上面的callback,也可以用其他的名字;jsonpCallback是指定参数的值,上面是参数值是随机生成的,所以用“?”来代替。好了,到这里我们利用jsonp来解决跨域也差不多了,同样的,既然它那么好用,那么有利必有弊,jsonp实现跨域有啥缺点呢?这里我们总结了两点:第一点是只支持get方式;第二种是后端代码要调整。其实呢,在最上面我们已经提高过,jsonp跨域的本质是通过script标签来和其他域发生交互,而且script标签只支持get方式的请求,所以这也是jsonp跨域的一大缺点。
看到这,你想到了什么,咋们执行代码会出现什么情况呢?deng~deng~deng~
哈哈~ 报错?不是吧?这么可能?没错,是报错,我们这样只是简单进行ajax请求,进行跨域当然会报错啦,但是呢,这个报错是非常有必要的,细心的你如果仔细看,会发现报错的原因在于缺少一个头,就是这句代码:Control-Allow-Origin。太感谢浏览器了,这货竟然帮我们把问题找出来了。其实这个东西是为了跨域安全问题,需要在服务器响应头部提供一些信息,供浏览器校验请求是否被允许。那么接下来就好办了,我们只需要在我们目标请求b.test.com在返回的时候给我们加一个头信息,并且头信息是允许我们当前所在的域b.test.com来发起访问。那么接下来我们只需要修改请求目标的后端代码,代码如下:
这边只要在请求头里面把a.test.com设置为可以被访问的对象,这样它就可以实现跨域请求了。如果实现多个域只要用“*”来代替就行啦。
这边一样会报错,一样的我们根据浏览器反馈给我们得信息进行分析,得出了Access-Control-Allow-Methods。粗浅的理解就是没有这个权限呗!那不是很好办嘛,同理我们在后端代码上做下修改不就成了!代码如下:
这样修改完,就可以使用POST/PUT等请求方式进行跨域请求啦。到此为止,我们针对跨域这问题也算是详细得分析了一遍了,如果乡亲们还是不解,那么我也给您跪了。真心带不动啊!!!
- JavaScript常见跨域思路代码
- javascript常见代码
- 常见Javascript代码
- 常见的JavaScript代码(四)
- 常见的JavaScript代码(五)
- 常见的JavaScript代码(七)
- 常见的JavaScript代码(六)
- 常见的JavaScript代码(八)
- Javascript表格翻页效果实现思路及代码
- 常见算法与思路
- 常见算法思路总结
- [天池代码分享&思路沉淀]机器学习常见的算法面试题总结
- 网页中一些常见的问题与javascript解决代码
- javascript(JS)常见的表单输入限制方法代码
- javascript(JS)常见的表单输入限制方法代码
- javascript(JS)常见的表单输入限制方法代码
- javascript(JS)常见的表单输入限制方法代码
- js验证网址等Javascript常见验证代码合集
- HNACM(七)A.物资调度
- JavaScript XML 跨浏览器
- 关于shared_ptr
- WebGIS入门知识
- 文件存储
- JavaScript常见跨域思路代码
- 《统计学习方法》笔记(4):朴素贝叶斯
- 源码--文件下载
- mysql引擎
- 音频-音频术语名词解释
- 容器执行Servlet API 中ServletContext、ServletContextListener、Filter、Servlet的顺序
- MQTT协议应用:外网手机控制内网树莓派
- JSON 入门
- Unity3d push调查