Hbuilder編輯App時，ajax跨域訪問失敗問題
阿新 • • 發佈：2019-03-08
超時時間 esc spa 數據 服務 tst acc struts ipv
今天試著用Hbuilder寫app的前段顯示頁面，在第一步時就被打住了，ajax異步調用服務器的登錄接口時，報錯，
顯示這樣的錯誤
XMLHttpRequest cannot loadhttp://www.baidu.com/. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘null‘ is therefore not allowed access.
這個百度的網址是我自己試著玩的，然後我就開始尋找解決的辦法。
網上給出的辦法好像有兩種，我給出我選用的這種，並且親測成功。
document.getElementById("submitBut").addEventListener(‘tap‘,function ajaxPost(){
mui.ajax(‘http://localhost:8080/demo01/user_service‘, {
data: {
},
dataType: ‘json‘, //服務器返回json格式數據
type: ‘post‘, //HTTP請求類型
timeout: 10000, //超時時間設置為10秒；
success: function(data) {
mui.openWindow(‘index.html‘, ‘id‘, {})
},
error: function(xhr, type, errorThrown) {
}
});
});
這個是我App端js的訪問代碼，如果訪問成功就跳轉到主界面。
服務器端的話，我是用的struts2，寫了一個void action方法來接收ajax的訪問，並且返回json格式的數據。
action中的代碼如下：
HttpServletResponse response = ServletActionContext.getResponse();
/**
*需要添加下面三行header頭
*/
response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE"); //支持的http 動作 response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); //響應頭 請按照自己需求添加。
Map<String,Object> result=new HashMap<String,Object>(); ServletOutputStream out = response.getOutputStream(); result.put("result","success"); result.put("message","message"); result.put("description","description"); JSONObject json = new JSONObject(result); out.println(json.toString());
然後就可以ajax跨域訪問了。
網上還有一種方法是 把ajax中的數據格式從json改成jsonp，我沒測試；
還有一種說的是 把mui.js中的代碼註釋掉一行，這個我測試失敗。
還有一種說法，測試項目的時候，不要把地址寫成localhost或者127.0.0.1，win+R，輸入cmd，輸入ipconfig，然後查看自己的ipv4地址，沒有測試，大家想要測試的可以試一試，玩意對了呢？
Hbuilder編輯App時，ajax跨域訪問失敗問題