前端Vue採用jsonp方法訪問後臺資料

前端請求程式碼：

getAllList() {
	//匯入Vue-resource.js,通過this.$http發起資料請求
	//this.$http.get('url').then(function(result）{})
	//通過then指定回撥函式，可獲取伺服器返回的資料
	//判斷result.status是否等於200,200為請求成功。
	//若是0，則將result.body賦值給this.list。若不是則提示獲取資料失敗
				
this.$http.jsonp('http://localhost:8080/VueServer/server')
    .then(function(result) {
        console.log(result)//便於檢視資料返回情況
	    if(result.status === 200) {
			this.list = result.body
		} else {
			alert('獲取資料失敗')
		}
     })
}
 

後臺servlet主要程式碼：

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setHeader("content-type", "text/html;charset=UTF-8");
    PrintWriter out;
    out=resp.getWriter();
    out.write("[{id:1, name:'賓士'},{id:2, name:'寶馬'}]");
}

 在控制檯Network檢視，該請求是有資料返回的，但是Response的body或者data為空，狀態碼status為0

原因是jsonp在傳送請求的時候在URL後面自動添加了 一個callback引數，而而我們沒有把這個引數返回導致Response無資料

解決方法：

在後臺獲取callback的值並將其與返回資料拼接後一起放回

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setHeader("content-type", "text/html;charset=UTF-8");
    PrintWriter out;
    out=resp.getWriter();
    //獲取callback值與需要返回的資料拼接，一併返回給前端。注意需要返回的資料需要用小括號“()”包裹起來
    out.write(req.getParameter("callback") + "([{id:1, name:'賓士'},{id:2, name:'寶馬'}])");
    }
 

 這樣前端就可以準確獲取資料了，如圖