zoukankan      html  css  js  c++  java
  • MUI 跨域请求web api

    由于刚接触MUI框架,所以在跨域问题上花了一点时间。希望我的方式能帮你少走点弯路(大神就直接过里吧)!

    首先,遇到这个问题,各种百度。其中说法最多的是将mui,js文件里的 setHeader('X-Requested-With', 'XMLHttpRequest'); 注释掉。我这里没有将其注释,因为我相信,这个框架出来这么久了,不可能连这个问题都没处理吧(不跨域,自己玩???)。

    前端部分代码:

     1     //mui,js(Mui v3.7.0)
     2     //------注意--------
     3     //1、调试需要在真机环境进行操作;
     4     //2、mui本身是支持跨域访问的(无需纠结跨域问题);
     5     //3、请求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代码:

    //注意: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跨域的问题,这里不做详细说明,推荐一篇文章(这里已经很明细了)。

    本文章会根据自己的开发过程,会做出适当更新。有什么不清楚的,可以直接留言给我。

  • 相关阅读:
    Bate版本控制报告
    【探路者】第五周立会报告6(总第32次)
    【探路者】第五周立会报告5(总第31次)
    【探路者】第五周立会报告4(总第30次)
    【探路者】第五周立会报告3(总第29次)
    【探路者】第五周立会报告2(总第28次)
    例行报告
    【探路者】第五周立会报告1(总第27次)
    【探路者】第四周立会报告7(总第26次)
    “Hello world!”团队第三周贡献分规则
  • 原文地址:https://www.cnblogs.com/CHNMurphy/p/10031190.html
Copyright © 2011-2022 走看看