JSONP及Axios

一、JSONP

        概述：一种非官方的跨域解决方案，主要利用了script标签不受跨域影响的特性来完成对应的请求操作，实际上是一个get请求（默认get）

        什么叫跨域？

                同源策略：ajax的一种安全机制，当域名、端口号、协议三者不一致时，会产生跨域

                跨域的产生：协议不同、端口不同、ip地址不同、ftp请求资源不同

         解决方案：

                后端解决：

response.setHeader('Access-Control-Allow-Origin','*') //设置所有的请求地址都允许跨域
response.setHeader('Access-Control-Allow-Origin-Method','*') //设置所有请求方法都允许跨域

                前端解决：（JSONP）

                代理服务器：

iframe script link 都不受跨域的影响（src href）
webSocket（套接字）

        

        JSONP优缺点

                优点：不受同源策略影响；兼容性好，跨域在古老浏览器中运行；请求完毕调用回调函数的方式传回结果

                缺点：只支持get请求（主要运用于查询）

        JSONP流程    （回调函数是服务端调用的）

<script>
// var wd = '奥特曼'
function fn(result){
console.log(result);
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=奥特曼
&cb=fn"></script>

  

        

二、HTTP协议

        缓存

提高文件访问速度，减少请求。提高效率。重复请求服务器不会重复响应

        

        强制缓存（http请求里面）

                不会发送请求（直接从缓存中读取）状态200       

                cache-control http2.0 缓存控制器 相对时间       expires http 1.0 过期时间 绝对时间      

cache-control:max-age=60
//60秒内 再访问这个网站 从本地读

               

        协商缓存（HTTP请求里面）

                协商缓存一定会请求，如果文件改变就会通过协商缓存（重定向）状态码304（没变）200变了

                etag 标识根据对应hash码生成一个特定的码，文件一变这个码会重新生成（根据它就可以区分是否变
化了）
                last-modified 最后的修改时间 （时间如果改了 证明对应文件就变了 就可以区分文件是否发生变化）

三、Axios

        基于promise的HTTP请求库

        特性：

                从浏览器中创建 XMLHttpRequests
                从 node.js 创建 http 请求
                支持 Promise API
                拦截请求和响应（拦截器）
                转换请求数据和响应数据 （自动进行数据转换）
                取消请求（可以请求取消）
                自动转换 JSON 数据 （转换的数据形式以json格式体现）
                客户端支持防御 XSRF （安全性高）