1. 程式人生 > >前端ajax請求跨域,使用jsonp完美解決

前端ajax請求跨域,使用jsonp完美解決

【1】今天在html中ajax請求另外一個專案的接口出現跨域問題,好吧,那就想辦法解決吧,網上百度了有jsonp解決方案,但是其中有各種坑(坑是因為自己不瞭解導致),直接上原始碼吧。。。。。。

【前端】

function showImg(){
$.ajax({
         url:'http://localhost:8080/g',
         type:'post',
         data:{'f':'f'},
         dataType: "jsonp",
         jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
         jsonpCallback:"showData",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名,也可以不寫這個引數,jQuery會自動為你處理資料
         success: function(data){
        console.log(data);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown){
        console.log("伺服器異常");
             alert(XMLHttpRequest.status);
             alert(XMLHttpRequest.readyState);
             alert(XMLHttpRequest.responseText);
             alert(textStatus);
             alert(errorThrown);
             console.log(textStatus); 
         }
     });

}

//回撥函式
 function showData (result) {
     var data = JSON.stringify(result); //json物件轉成字串
     console.log(data);

 }

【Java後端】

@RequestMapping("/hello")
    @ResponseBody
    public void hello(HttpServletRequest request, String f,HttpServletResponse response) throws IOException{
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    //這裡寫自己的邏輯過程
       //前端傳過來的回撥函式名稱
       String callback = request.getParameter("callback");
       Map<String, Object> resultMap = new HashMap<String, Object>();
       resultMap.put("path", path);
       //用回撥函式名稱包裹返回資料,這樣,返回資料就作為回撥函式的引數傳回去了,callback()這個()裡面放的是json格式
       String str = callback + "(" + new Gson().toJson(resultMap) + ")";
        
       response.getWriter().write(str);
    }