解决跨域-jsonp

在通过ajax进行前后端交互，获取接口时，会遇到No 'Access-Control-Allow-Origin’的跨域报错

为什么产生跨域错误？
因为浏览器的同源策略。

概念性的解释下同源策略。
同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

总结：端口不同，域名不同，协议不同 出现跨域

那么如何解决跨域问题呢？

一般常使用的有三种方法：
1.后端代理（后端不存在跨域）
2.CORS解决跨域
3.jsonp(json with padding)----前端常用的

解释下CORS解决跨域：
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出 XMLHttpRequest请求， 从而克服了AJAX只能同源使用的限制。

需要服务器(提供接口的源码里面)添加下面两句话。

重点讲下jsonp
jsonp：(json with padding).数据填充的方式
一、首先一步步进行推导下

说明：
1.script标签的src属性不存在跨域

二、接下来进入核心部分了
思考：如果要在刚才创建的data.rar压缩包里的数据是 [“zhangsan”,“lisi”,“wangwu”] 这样的json数据，怎么取到？

取不到，但是如果说里面的数据是 fn([“zhangsan”,“lisi”,“wangwu”])
这是个json数据吧，把它填充到一个函数里面来了吧，所以叫json with padding。其实就是将json数据填充给一个函数或者方法

说明：
1.script利用了回调函数

使用jsonp有个要求：如果第三方接口jsonp格式的，无需后端参与，独立完成。

三、做个请求淘宝搜索下拉提示的小案例：
首先说明下接口怎么拿？淘宝页面按下F12，打开network里的XHR，在淘宝搜索框输入些内容就可以看到接口文件了

效果展示图：

jsonp总结：
1.jsonp脱离ajax
2.script标签的src属性不存在跨域。
3.script利用回调函数