之前有想过在自己的页面调用第三方接口,但奈何受限于CORB,以至于无法开展。
最近确实要赶一个项目,直接在.java里调用接口返回的json太过复杂,也懒得去写实体类处理(懒惰使人进步)
然而在js里使用通过ajax请求会比较方便处理json
发现不会的问题肯定是先问度娘啊,百度整的花里胡哨,方法很多,留我一人在风中凌乱(我还是不会)。
然后想起来前几天有个朋友做过跨域,赶紧去请教啊,这里感谢@囚墨,贴上他给我的代码

$.ajax({
      type:"get",
      async:false,
      url:"https://quark.sm.cn/api/rest?method=sc.operation_sorting_category&app_chain_name=waste_classify&q="+q,
    dataType : 'jsonp',
      success:function(data){
          console.log(data.data.waste_type);
              if(data.data.category!=null){
                  layer.alert(q+"属于:"+data.data.waste_type);
              }else{
                  layer.alert(q+"属于:未知辣鸡!")
              }
      }
});

如上所知,是调用的垃圾分类接口。
我测试是正常的,但是当我换一个地址时突然有gg了。很少难受
随后继续遨游在知识的海洋里,终于,找到了如下内容

    //有的不需要加jsonp: 'jsoncallback,而有的需要,并且还有无论如何都不跨域的
 $.ajax({ 
     async:false, 
     url: 'http://floor.huluxia.com/post/lock/ANDROID/2.0?post_id=41788320&platform=2&gkey=000000&app_version=3.5.0.93.1&versioncode=20141413&market_id=floor_web&_key=5C3FBA6EDF275E445A9B3DDDEA89E92EAED66AB13B34CBB7D01A4067C3FDB7CAF99AF25E11BDCCAB5F91CF84F05FF5306F99E75A25B0&device_code=%5Bw%5D02%3A00%3A00%3A00%3A00%3A00%5Bd%5D830b9382-7eef-4557-b585-afd28f674fe5',  // 跨域URL
     type: 'post', 
     dataType: 'jsonp', 
    /* jsonp: 'jsoncallback', //默认callback */
     data: "memo=无关内容1。",  
     timeout: 5000, 
     beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
     },
     success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
         alert(json.status);
     }, 
     /* complete: function(XMLHttpRequest, textStatus){ 
         $.unblockUI({ fadeOut: 10 }); 
     },  */
     error: function(xhr){ 
         //jsonp 方式此方法不被触发
         //请求出错处理 
         alert("请求出错(请检查相关度网络状况.)"); 
     } 
 });

上面是一个我多次测试后的了,简单说一下我的测试流程,首先是get访问垃圾分类接口(请求出错),然后我注释掉部分代码发现是jsonp: 'jsoncallback的问题,注释掉即可访问。随后网上找了一个一言接口,测试同上(当时非常高兴);当我正式测试我待会项目需要用到的接口时这个页面突然请求出错,本着愚公移山的学习态度,我又用“注释法”测试时,发现启用jsonp: 'jsoncallback即可,哦多么让人着迷,经过这么久的查找资料我大概判断为后端处理的不同上,具体可找相应的教程视频看看(总所周知b站是学习网站);我有些需要用到post(网上的了解为jsonp仅get方式),所以就测试了一下,success撒花。
如上则是简介的测试流程。
本着学习记录的精神记录这次的问题,以后再遇见方便处理。
本次学习了解到的关键词同源策略
附上知乎地址:为什么浏览器要限制跨域访问?
到此为止,睡觉之前构思一下,明天做个小项目。
晚安!!!
突然想到附在后面:
上面方法虽然有时候会出现请求失败,但其实是请求成功了,后端也做出了相应响应,只是前端没有拿到响应结果而已(亲测有效哦!)