axios或jquery或＜script＞

  • 请求第三方接口
  • axios通过代理
  • $getJSON
  • 跨域请求
  • script标签
  • jsonp

请求第三方接口

axios通过代理

  1. 跨域请求地址
    https://lab.isaaclin.cn/nCoV/api/overallhttps://lab.isaaclin.cn/nCoV/api/area?province=北京市
  2. config下index.js的proxytable配置
'/bpi':{
  target: 'https://lab.isaaclin.cn/nCoV/api',
  changeOrigin: true,
  pathRewrite: {
    '^/bpi': ''
  }
}
  1. .vue文件进行axios请求
this.$axios.get("/bpi/overall").then((res)=>{
  console.log(res.data)
})
this.$axios.get("/bpi/area?province=北京市").then((res)=>{
  console.log(res.data)
})

$getJSON

$.ajaxSettings.async = false;//防止返回数据混乱，同步请求
$.getJSON(url1, (res)=>{
    console.log(res)
  })
$.getJSON(url1, (res)=>{
  console.log(res)
})
$.ajaxSettings.async = true;//重置回异步，防止影响其他

奇怪的问题
不论上面那一种哪一种方法，都不能同时请求两个，$.getJSON会报Access-Control-Allow-Origin的错，axios会报503的错。也没找到好的解决方案，暂时解决方案为两个请求一个放在app.vue，一个放在index.vue。

跨域请求

script标签

前端

<script>
		//回调函数，处理返回
        function showData (result) {
           console,log(result)
        }

        $(document).ready(function () {
        //插入标签
			$("head").append("<script src='https://lab.isaaclin.cn/nCoV/api/overall?callback=showData'><\/script>");
        });
</script>

后端返回

callback是jquery在进行跨域请求时生成的一个回调函数名，当页面取得服务器返回的值时，会由该回调函数解析成json对象。所以在返回数据时应该把对整个回调函数的调用进行返回，这个函数需要一个json对象的字符串作为参数，这样才能正常解析。

返回格式示例：callback（{“name”:”hello”})

//前端传过来的回调函数名称
 String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";
 }

jsonp

jsonp的原理就是通过script的src，将函数作为src请求地址的参数来传递数据，所以jsonp只有get一种传输方式。

前端

function showData (result) {
           		console,log(result)
        	}

 			 $.ajax({
                   url: "https://lab.isaaclin.cn/nCoV/api/overall",
                   type: "GET",
                   dataType: "jsonp",  //指定服务器返回的数据类型
                   jsonpCallback: "showData",  //指定回调函数名称
                   success: function (data) {
                        console.info("调用success");
                   }
               });

后端返回

callback是jquery在进行跨域请求时生成的一个回调函数名，当页面取得服务器返回的值时，会由该回调函数解析成json对象。所以在返回数据时应该把对整个回调函数的调用进行返回，这个函数需要一个json对象的字符串作为参数，这样才能正常解析。

返回格式示例：callback（{“name”:”hello”})

//前端传过来的回调函数名称
 String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";
 }