jsonp解决Ajax跨域问题

简介: jsonp解决Ajax跨域问题

     什么是跨域?
               1、域名不同。
               2、域名相同,端口不同。
               3、由于同源策略,安全性考虑设计如此。

       ajax跨域问题:由js请求处于跨域范围的数据,请求不到。

      问题解决:jsonp解决。

       什么是jsonp?

       它是一个跨域解决方案。js跨域请求数据不可以,但js跨域请求js脚本是可以的。这是个bug,巧妙利用这个bug可以把数据封装成一个js语句,跨域请求js脚本可以得到此脚本。可以把数据作为参数传递到被请求的方法中,就可以获得数据。

       jsonp的原理:

6e40677231da26be044b7f3578b0cda9_SouthEast.png

       jsonp实现的示例://todo:待补充

       请求方ajax代码:

       被请求方js代码:

       其中的json数据为:


总结:

       越来越认识到:图有助于理解,一张图胜过千言万语。多画图,多总结。

 

相关文章
|
4月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
51 0
|
前端开发 JavaScript Java
SpringBoot Ajax跨域问题(session共享问题)
ajax 发送post请求至springBoot出现跨域问题 需要在springBoot加上注解 @CrossOrigin 就能解决
64 0
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
78 1
|
JavaScript 前端开发 安全
vue中解决ajax跨域问题(no “access-control-allow-origin”)
产生原因 跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。 所谓同源指的是两个页面具有相同的协议、主机和端口,三者有任一不相同即会产生跨域。
258 0
|
前端开发 JavaScript
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
157 0
|
JSON JavaScript 前端开发
ajax跨域问题
ajax跨域问题
118 0
ajax跨域问题
|
前端开发 JavaScript 安全
【Ajax进阶】跨域和JSONP的学习
跨域和JSONP的学习
183 0
【Ajax进阶】跨域和JSONP的学习
|
前端开发 JavaScript
ajax,jsonp,axios面试题
ajax,jsonp,axios面试题
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
65 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
67 0