JSONP如何解决JS跨域问题-创新互联

小编这次要给大家分享的是JSONP如何解决JS跨域问题，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

现代编程中前后端都已经是分开部署了，前端有自己的域，后端也有自己的域。由于浏览器同源策略的限制，非同源下的请求，就会产生跨域问题。解决跨域问题的方法有很多种，例如CORS(cross orign resources share)和JSONP。这里我就着重介绍一下jsonp的解决方案。

一：基础概念

同源策略：同一协议，同一域名，同一端口号。只要不满足三者其中一种都是属于跨域问题。

举几个简单的例子

1: https://www.a.com:8080到http://www.a.com:8080的请求会出现跨域（域名、端口相同但协议不同）

2: https://www.a.com:8080到https://www.b.com:8080的请求会出现跨域（协议、端口相同但域名不同）

3: https://www.a.com:8080到https://www.a.com:9090的请求会出现跨域（协议、域名相同但端口不同）

跨域：跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

二：区别JSON和JSONP

• JSON的全称为JavaScript Object Notation，是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简单来说，json就是一种用来传输数据的数据格式。
• JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback(或者一开始就定义一个回调方法)参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

三：跳出同源的“舒适圈”

我们发现，在web页面调用js文件是不受是否跨域问题的影响的。而且我们还发现凡是拥有 src 这个属性的标签都拥有跨域的能力，比如img和script。在html页面中我们经常会做引入图片的操作，通过img标签中的src属性，我们就可以请求得到一个静态资源。

我们可以看到这本质上就是一个GET请求，同理，link和script里的href和src同样可以通过GET请求去请求资源。