JS跨域之JSONP方式

2018/4/16 晴天

本人小白一枚，网上关于jsonp跨域的博文和回答实在是太多了，看到好多种？？jsonp的方式，并没有一一去尝试，可能原理都相同吧，还没有做深入了解，只是先记录一下我所掌握的jsonp解决跨域的方法，希望和我一样看的头晕眼花的小伙伴能有所收获~

1 同源策略

要理解跨域，先要了解“同源策略”，所谓同源是指，域名，协议，端口相同。所谓“同源策略”，简单的说就是基于安全考虑，当前域不能访问其他域的东西。
一些常见的是否同源示例可参照下表：

image

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣提供的接口数据。即使是访问本地非JS文件的文件（比如.json文件）.

不过火狐可以正常读取到，原因是：虽然允许跨域很不安全，但是如果不跨域的话又带来很多不便，所以火狐是允许跨域的。

为什么谷歌获取不到？

这里要提到一点，访问本地计算机中的文件，使用的是file协议，file协议主要用来访问本地计算机中的文件，就如同在windows资源管理器中打开文件一样，注意它是针对本地（本机）的，简单来说，file协议是访问你本机的文件资源。
谷歌的报错可以在控制台明显看到：

Cross origin requests are only supported for protocol schemes:http，data，chrome，chrome-extension，https

实质上就是安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败，是因为浏览器安全机制不允许。

为什么谷歌不支持跨域？
这是因为浏览器的安全策略，即禁止ajax访问本地的文件，这是不安全也是不允许的，举例的话，就相当于你访问了一个网站，这个网站可以读取到你本地的文件.......

2 跨域问题

Chrome真的很严格，对于Chrome来说，访问本地非js文件或者非同源地址都属于跨域行为，而火狐可以访问本地文件，但是访问非同源地址时还是跨域的行为。
这类问题统称为跨域问题。

3 JSON

JSON是一种数据存储格式，不懂得朋友可以自行百度一下~

3 JSONP的原理

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题，利用