jsonp

一、什么是jsonp

JSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式原理就是通过添加一个script标签，向服务器请求JSON数据，这样不受同源政策限制。服务器收到请求后，将数据放在一个callback回调函数中传回来。比如axios。不过只支持GET请求且不安全，可能遇到XSS攻击，不过它的好处是可以向老浏览器或不支持CORS的网站请求数据

服务端：将服务端返回数据封装到指定函数中返回 callback({返回数据})

客户端：不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到；所以利用同源策略漏洞，将访问地址放在下面的标签的路径中，

二、 jsonp优点和缺点

优点:

兼容性比较好,可用于解决主流浏览器的跨域数据访问的问题
不受到同源策略的限制,在请求完毕后可以通过调用callback的方式回传结果

缺点:

仅支持get请求
具有局限性，不安全,可能会受到xss攻击
只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题

三、jsonp的封装

OWUR(YWY0N9V%O5D47P}JAV.png

axios

一、什么是axios

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,简单的理解就是ajax的封装

二、axios发送get请求、post请求

    //get请求方式一:
    
    axios({
        method:'get',
        url:'api',
        params:{key:value}
    })

    //get请求方式二:
    
    axios.get("api",{
        params:{key:value}
    })

    //post请求方式一:
    //注：post请求方法有的要求参数格式为formdata格式，此时需要借助 qs.stringify()方法将对象转换为字符串
    axios({
        method:"post",
        url:"api",
        data:obj
    })

    //post请求方式二:
    //注：post请求方法有的要求参数格式为formdata格式，此时需要借助 qs.stringify()方法将对象转换为字符串
    axios.post("api",qs.stringify(data){
        headers
    })

注意：
post请求的时候参数通过data进行传递
get请求的时候参数通过params进行传递

三、axios创建实例

项目中网络请求可能不止一个,可以通过创建多个axios实例进行不同的配置

import axios from "axios";
 
//创建axios实例
const service=axios.create({
    baseURL:" ",
    timeout:0,
    headers:{
        "Content-Type":"application/json;charset=utf-8"
    }
})
//请求拦截
service.interceptors.request.use((config)=>{
    config.headers=config.headers || {}
    if(localStorage.getItem('token')){
        config.headers.token=localStorage.getItem("token") || ''
    }
    return config
})
 
//响应拦截
service.interceptors.response.use((res)=>{
    const code:number=res.data.code
    if(code !=200){
        return Promise.reject(res.data)
    }
    return res.data
},(err)=>{
    console.log(err)
})
 
 //暴露对象
export default service

jsonp、axios