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

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

  • 相关阅读:
    山东第一届省赛1001 Phone Number(字典树)
    HD2222 Keywords Search(AC自动机入门题)
    POJ 1947Rebuilding Roads(树形DP + 01背包)
    zoj 3946 Highway Project(最短路 + 优先队列)
    HDU5672String(尺标法)
    HDU5671Matrix(矩阵行列交换)
    HDU5670Machine(抽象进制)
    用户体验评价
    团队冲刺第二阶段-6
    第十四周学习进度
  • 原文地址:https://www.cnblogs.com/CHNMurphy/p/10031190.html
Copyright © 2020-2023  润新知