MUI 跨域請求web api

因爲剛接觸MUI框架,因此在跨域問題上花了一點時間。但願個人方式能幫你少走點彎路(大神就直接過裏吧)!html

首先,遇到這個問題,各類百度。其中說法最多的是將mui,js文件裏的 setHeader('X-Requested-With', 'XMLHttpRequest'); 註釋掉。我這裏沒有將其註釋,由於我相信,這個框架出來這麼久了,不可能連這個問題都沒處理吧(不跨域,本身玩???)。前端

前端部分代碼:web

 1     //mui,js(Mui v3.7.0)
 2     //------注意--------
 3     //一、調試須要在真機環境進行操做;
 4     //二、mui自己是支持跨域訪問的(無需糾結跨域問題);
 5     //三、請求API地址不能使用localhost 或者127.0.0.1之類的ip,只能使用實際的IP才能訪問。
 6     var reqRootUrl = "http://192.168.1.217";
 7     mui.ajax({
 8         url: reqRootUrl + '/api/UserLogin/QueryAccount',
 9         data: {
10             AccountName: "***",
11             Pwd: "***",
12             Company: "***"
13         },
14         dataType: 'json',
15         type: 'post',
16         timeout: 30000, //超時時間設置爲30秒;
17         headers: {
18             'Content-Type': 'application/json',
19             //"Authorization": "BasicAuth " + _ticket//傳遞基於「Basic基礎認證」令牌
20         },
21         beforeSend: function () {
22             plus.nativeUI.showWaiting("正在請求數據...");//開啓加載提示
23         },
24         complete: function () {
25             plus.nativeUI.closeWaiting();//關於加載提示
26         },
27         success: function (data) {
28             //處理成功邏輯
29             mui.openWindow({
30                 url: 'defaule.html',
31                 id: 'defaule.html',
32                 extras: {
33                     Ticket: data.Ticket//頁面傳遞參數
34                 },
35                 waiting: {
36                     autoShow: true, //自動顯示等待框,默認爲true
37                     title: '正在登陸...' //等待對話框上顯示的提示內容
38                 }
39             });
40         },
41         error: function (xhr, type, errorThrown) {
42             plus.nativeUI.closeWaiting();
43             var _error = "";
44             switch (type) {
45                 case "timeout":
46                     _error = "服務器響應超時";
47                     break;
48                 default:
49                     _error = "異常信息:" + xhr.responseText;
50                     break;
51             }
52             mui.toast(_error);
53         }
54     });

 

 web api代碼:ajax

//注意:web api對應的函數不能設置爲static類型,不然沒法調用(這個算是本身開發過程遇到的一個小細節吧)
[HttpPost] [EnableCors(origins: "*", headers: "*", methods: "*")] public responseObj QueryAccount([FromBody]requestObj postJson) { responseObj rObj = new responseObj(); //to do logic
return rObj; }

關於web api跨域的問題,這裏不作詳細說明,推薦一篇文章(這裏已經很明細了)。json

本文章會根據本身的開發過程,會作出適當更新。有什麼不清楚的,能夠直接留言給我。api

相關文章
相關標籤/搜索