跨域问题
首页 专栏 java 文章详情
0

跨域问题

summer 发布于 今天 07:33

同源策略说明
说明: 浏览器出于安全性的考虑要求发起Ajax时,必须满足同源策略的规定.
要求:
1.协议名称相同 http/https
2.域名相同
3.端口号相同
如果上述的3条违反任意的一条即违反了同源策略.称之为跨域访问. 反之为同域访问

解决方案一、JSONP跨域原理说明

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说 A服务器的网页无法与不是 A的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。 用 JSONP 抓到的资料并不是 JSON而是任意的JavaScript用 JavaScript 直译器执行而不是用 JSON 解析器解析。

1).利用javaScript中的src属性 实现跨域.
2).自定义回调函数
<script type="text/javascript"> /JS是解释执行的语言 / /定义回调函数 / function hello(data){ alert(data.name); } </script>

3).将返回值结果进行特殊的格式封装: callback(json)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试JSON跨域问题</title> <script type="text/javascript"> /*JS是解释执行的语言 */ /*定义回调函数 */ function hello(data){ alert(data.name); } </script> <!--该json一直保存到浏览器中等待调用,但是没有函数名称无法调用 --> <script type="text/javascript" src="http://manage.jt.com/test.json"></script> <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script> </head> <body> <h1>JS跨域问题</h1> </script> </body> </html>

JSONP API学习
1).编辑页面,发起跨域请求
jsonp只能支持get请求的原因是:src属性只能支持get请求

编辑JSONPControlle

3.JSONP高级API

解决方案二、CORS跨域原理说明
1.CORS介绍
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会 自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此, 实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

2.关于CORS工作原理
说明:在服务器中添加响应头信息.告知客户端 程序可以正常执行.

3 CORS使用说明
1.客户端支持CORS

2.配置服务器端(注解@CrossOrigin jackson包下)

前端 java
阅读 19 更新于 今天 09:06
举报
收藏
分享
本作品系原创, 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar
summer

这一路我披荆斩棘,只为遇见你

30 声望
3 粉丝
关注作者
0 条评论
得票数 最新
提交评论
avatar
summer

这一路我披荆斩棘,只为遇见你

30 声望
3 粉丝
关注作者
宣传栏
目录

同源策略说明
说明: 浏览器出于安全性的考虑要求发起Ajax时,必须满足同源策略的规定.
要求:
1.协议名称相同 http/https
2.域名相同
3.端口号相同
如果上述的3条违反任意的一条即违反了同源策略.称之为跨域访问. 反之为同域访问

解决方案一、JSONP跨域原理说明

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说 A服务器的网页无法与不是 A的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。 用 JSONP 抓到的资料并不是 JSON而是任意的JavaScript用 JavaScript 直译器执行而不是用 JSON 解析器解析。

1).利用javaScript中的src属性 实现跨域.
2).自定义回调函数
<script type="text/javascript"> /JS是解释执行的语言 / /定义回调函数 / function hello(data){ alert(data.name); } </script>

3).将返回值结果进行特殊的格式封装: callback(json)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试JSON跨域问题</title> <script type="text/javascript"> /*JS是解释执行的语言 */ /*定义回调函数 */ function hello(data){ alert(data.name); } </script> <!--该json一直保存到浏览器中等待调用,但是没有函数名称无法调用 --> <script type="text/javascript" src="http://manage.jt.com/test.json"></script> <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script> </head> <body> <h1>JS跨域问题</h1> </script> </body> </html>

JSONP API学习
1).编辑页面,发起跨域请求
jsonp只能支持get请求的原因是:src属性只能支持get请求

编辑JSONPControlle

3.JSONP高级API

解决方案二、CORS跨域原理说明
1.CORS介绍
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会 自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此, 实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

2.关于CORS工作原理
说明:在服务器中添加响应头信息.告知客户端 程序可以正常执行.

3 CORS使用说明
1.客户端支持CORS

2.配置服务器端(注解@CrossOrigin jackson包下)