2019-10-21

JsonP

可参考：https://blog.csdn.net/mgsky1/article/details/80024876

1 什么是JsonP

json 的一种跨域的"使用模式"。即跨域访问。

2.为什么使用JsonP?

1）因为同源策略。

2）非同源策略限制以下几种行为：

a. Cookie、LocalStorage 和 IndexDB 无法读取

b. DOM 和 Js对象无法获得

c  AJAX  请求不能发送

2.1 什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995 年引入浏览器，

它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript 的浏览器都会使用这个策

略。如果缺少了同源策略，浏览器很容易受到XSS、CSFR 等攻击

2.2 JsonP优缺点

优点：JSONP 的优点是：它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的

限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要 XMLHttpRequest 或

ActiveX 的支持；并且在请求完毕后可以通过调用 callback的方式回传结果。

缺点：：它只支持GET请求而不支持POST 等其它类型的HTTP 请求；它只支持跨域HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript调用的问题。

3.常见跨域场景

5. 跨域解决方案

1） 通过jsonp跨域

2） document.domain + iframe 跨域

3） location.hash + iframe

4） window.name + iframe 跨域

5） postMessage跨域

6） 跨域资源共享（CORS）

7） nginx代理跨域

8） nodejs中间件代理跨域

9） WebSocket协议跨域

6.JsonP的使用

6. 1 搭建跨域场景

6.1.1 需求：

1）创建两个web工程，名称为jsonDemo1(8080)、jsonDemo2(9090)

2）jsonDemo1中提供一个 index.jsp。

3）在 jsonDemo1 的index.jsp中通过Jquery的 Ajax跨域请求jsonDemo2

4）jsonDemo2中使用 springMVC 处理请求，返回一个 json对象

5）在 jsonDemo1 中将返回的结果插入到index.jsp中

6.2 jsonDemo1(8080) index.jsp

6..3 jsonDemo2(9090)  controller

6.4 测试：

6.5 结果：