mui.ajax怎么跨域,MUI 跨域请求web api

转载于 2021-08-05 18:15:26 发布

· 813 阅读

文章标签：

本文介绍了在使用MUI框架进行跨域请求时遇到的问题及解决方法，强调了MUI自身支持跨域，并提供了一个前端Ajax请求的示例。同时，提到了WebAPI的跨域配置，指出WebAPI控制器方法不应设为static以允许跨域调用。文章还分享了一个详细的WebAPI跨域解决方案链接，并表示会根据开发经验不断更新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

前端部分代码：

//mui,js(Mui v3.7.0)

//------注意--------

//1、调试需要在真机环境进行操作；

//2、mui本身是支持跨域访问的(无需纠结跨域问题)；

//3、请求API地址不能使用localhost 或者127.0.0.1之类的ip，只能使用实际的IP才能访问。

var reqRootUrl = "http://192.168.1.217";

mui.ajax({

url: reqRootUrl + '/api/UserLogin/QueryAccount',

data: {

AccountName: "***",

Pwd: "***",

Company: "***"

dataType: 'json',

type: 'post',

timeout: 30000, //超时时间设置为30秒；

headers: {

'Content-Type': 'application/json',

//"Authorization": "BasicAuth " + _ticket//传递基于“Basic基础认证”令牌

beforeSend: function () {

plus.nativeUI.showWaiting("正在请求数据...");//开启加载提示

complete: function () {

plus.nativeUI.closeWaiting();//关于加载提示

success: function (data) {

//处理成功逻辑

mui.openWindow({

url: 'defaule.html',

id: 'defaule.html',

extras: {

Ticket: data.Ticket//页面传递参数

waiting: {

autoShow: true, //自动显示等待框，默认为true

title: '正在登录...' //等待对话框上显示的提示内容

}

});

error: function (xhr, type, errorThrown) {

plus.nativeUI.closeWaiting();

var _error = "";

switch (type) {

case "timeout":

_error = "服务器响应超时";

break;

default:

_error = "异常信息:" + xhr.responseText;

break;

}

mui.toast(_error);

}

});

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

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

&dollar;&period;ajax 跨域请求 Web Api

WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

jQuery跨域调用Web API

我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html.有朋友说开发是会开发了,但不知道怎么调用啊? ...

angular2jsonp如何跨域请求百度API进行定位

前提,百度api的申请,不会的可以百度一下,下面是连接 http://lbsyun.baidu.com/index.php?title=webapi/ip-api 1.appMoudle里引入 imp ...

mui 跨域请求

var ur ...
基于&period;Net Framework 4&period;0 Web API开发(5)：ASP&period;NET Web APIs AJAX 跨域请求解决办法(CORS实现)
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...
ASP&period;NET web api 跨域请求
1.学习文章:AJAX 跨域请求 - JSONP获取JSON数据 1.asp.net代码参考文章:http://www.sxt.cn/info-2790-u-756.html (1).增加CorsH ...
随机推荐
WebLogic 12c控制台上传获取webshell
WebLogic 默认端口7001,一般可以通过这样来访问 http://10.9.1.1:7001/console 控制台通过弱口令weblogic/weblogic登录控制台,下一步获取如何上传 ...
审核流(2)流程设计-SNF&period;WorkFlow功能使用说明--SNF快速开发平台3&period;1
流程设计图形化的流程设计,更方便.直观 1.打开“流程设计“程序,如上.点击”新建“如下: 2.红色部分为必填项,审批对象是选择要审批的程序菜单,单据名称是在审核流流转时用于提示的单据名称,还要选择 ...
printf交替使用
今天附带printf一些替代实现. 转载请注明出处:http://blog.youkuaiyun.com/u010484477谢谢^_^ 我们总是用printf做各种输出语句: printf("%d&q ...
学习web components
javascript里的两种组件 1 autonomous custom elements 一般extends HTMLElement, 可以通过或doducmen ...
Jexus使用的相关记录
前言本文是零零散散的记录,部分内容是我在平时工作中用到的,部分是从群里"偷"来的,所以难免会有一些错误. 主要还是希望能帮到部分使用Jexus的朋友. 安装 curl https ...
iOS 去除高德地图下方的 logo 图标
[self.mapView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, ...
印象笔记无法连服务器(internet explore的问题)
https://www.zhihu.com/question/20214497?sort=created
OOM异常的4种可能分析
OOM异常:OutOfMemoryError 1.JAVA堆溢出 JAVA堆用于存储对象实例,只要不断的创建对象,并且保证GC Roots到这些对象之间有路径可以来避免垃圾回收机制清除这些对象,那么在 ...
第三个spring冲刺第1天
在第二阶段,我们的要实现的基本功能都已经基本是实现了,现在在第三阶段,我们会完善算法的改进.容错问题的兼容还有附加的其他功能,例如计时等