mui ajax 跨域问题如何解决！！！！
疯子
- 发布：2015-01-19 16:32
- 更新：2019-10-30 16:03
- 阅读：51640
最佳回复
mui.ajax在app里运行时自动跨域，因为此时调用的实际是plus.net的api。但必须在plus ready后调用，如果没有plus环境，mui.ajax会走普通xmlhttp请求，此时在iOS的wkwebview下就会有跨域问题。
而普通浏览器里运行时，根本没有plus环境，只会走浏览器的网络。如果不同域，则需要服务器配jsonp来完成跨域。
注意在边改边看里运行的是普通浏览器模式。
如果把5+app改造成微信公众号，或者配同域，或者jsonp。一般放在一个服务器下就不存在跨越问题了。
我在header中加上
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="content-security-policy">
之后还是报错："XMLHttpRequest cannot load http://avst.tv/webAPP/web/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."
请问还需要怎么改，或者后台有什么设置吗
好冷 - 诚接外包,QQ:23380891
我今天也遇到类似的问题：
环境如下：HBuilder 6.4.1.201509021952 WIN8 X32
项目目录：E:\DCLOUD\MUIDEMO
本机IP：192.168.1.108
服务器IP,10.61.0.21 PHP MYSQL
响应文件：http://10.61.0.21/msg_mzkx/get_msgid.php
调试的时候chrome控制台报错，然后给chromd增加一个启动参数 --disable-web-security就行了
mui.init({
pullRefresh: { //下拉
container: "#pullrefresh",
down: {
contentdown: "下拉加载",
contentover: "释放刷新",
contentrefresh: "正在加载..",
callback: pulldownRefresh
},
up: {
contentrefresh: '加载中',
contentnomore: '没有更多数据了',
callback: pullupRefresh
}
}
});
function pulldownRefresh() {
//以下处理跨域
PageNo = 1;
type = 2;
request = new XMLHttpRequest();
request.open("POST", "http://xxx.com");
var data = 'PageSize=' + PageSize + '&PageNo=' + PageNo;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = chuli;
request.send(data);
PageNo = 2;
}
function pullupRefresh() {
type = 1;
request = new XMLHttpRequest();
request.open("POST", "http://xxx.com");
var data = 'PageSize=' + PageSize + '&PageNo=' + PageNo;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = chuli;
request.send(data);
PageNo += 1;
}
function chuli() {
if (request.readyState === 4) {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
if (data.code == 200) {
var msg = data.data;
var count = data.mes;
var table = document.body.querySelector('.mui-table-view');
if (type == 2) {
table.innerHTML = '';
}
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = 0; i < msg.length; i++) {
msg[i].smeta = JSON.parse(msg[i].smeta);
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a href="detail.html?id=' + msg[i].id + '" class="mui-navigate-right" id="first"><img class="mui-media-object mui-pull-left" src="' + msg[i].smeta.thumb + '" />' +
'<p>' + msg[i].post_title + '</p><p>' + msg[i].post_excerpt + '</p></a> ';
if (type == 1) { //上拉
table.appendChild(li);
} else {
table.insertBefore(li, table.firstChild);
}
}
if (type == 1) { //上拉
if (PageNo >= count) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
} else {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
//mui('#pullrefresh').pullRefresh().refresh(true);
}
} else {
mui.toast(data.mes);
}
} else {
mui.toast('不是代码问题');
}
}
}
//刚进来下拉
function pageInit() {
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pulldownLoading();
}, 500);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pulldownLoading();
});
}
}
function openMenu() {
!index && (index = mui.currentWebview.parent());
mui.fire(index, "menu:open");
}
var index = null; //主页面
var PageNo = 1;
var PageSize = 8;
var request = "";
var type = 2; //1上拉 2下拉
pageInit(); 以上是我处理跨域的方法 服务器端php还要设置 header('Access-Control-Allow-Origin:*');
如果是用jsonp的话数据量不能太大，希望能帮到你们
我的问题已经解决
后台代码如下：
public static void reSponseJson(String string,HttpServletResponse response) {
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = null;
try {
out = response.getWriter();
out.print(string);
out.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
out.close();
}
}
ajax 代码如下：
var url = "http://192.168.1.100/lpAppService/JobMngController.do?action=jobListForPage";
mui.ajax(url, {
data: {
rows: rows,
page: page
},
//dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 1000, //超时时间设置为10秒；
success: function(data) {
console.info(data);
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
问题出在：一定要在head里面加上
<meta http-equiv="Access-Control-Allow-Origin" content="">
<meta http-equiv="content-security-policy">
head里面的内容如下：
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="content-security-policy">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
-
我也这样试过了，咋还不行
var url="http://www.sitename.cn/ZJGKTalentLMSRevDemoApp/User/SyncUserCustom.ashx?ApiKey=20433&SecurityToken=3424343"
var datatype="json";
var type="post";
var data = {
"ActionCode": "Create",
"ActionParms": [{
"Key": "UserName",
"Value": "demo5"
}, {
"Key": " Email ",
"Value": "demo5@163.com"
}, {
"Key": "Password",
"Value": "123456"
}, {
"Key": "RePassword",
"Value": "123456"
}, {
"Key": "UserRoleID",
"Value": "4"
}, {
"Key": "RealName",
"Value": "赵六"
}],
"Content": null,
"Format": 0
};
var
mui.ajax(url, {
data: data,
dataType: dataType, //服务器返回json格式数据
type: type, //HTTP请求类型
crossDomain: true,
timeout: 10000, //超时时间设置为10秒；
success: function(response) {//成功响应的回调函数
response = JSON.stringify(response);
} else if (dataType === 'xml') {
response = new XMLSerializer().serializeToString(response).replace(/</g, "<").replace(/>/g, ">");
}
respnoseEl.innerHTML = response;
},
error: function(xhr, type, errorThrown) {//异常处理；
console.log("异常："+type+errorThrown+xhr);
respnoseEl.innerHTML ="异常："+type+errorThrown+xhr;
},complete:function(xhr, status){
console.log('xhr' + xhr + 'complete:::' + status);
}
});2015-08-03 22:54
-
问题出在：一定要在head里面加上
<meta http-equiv="Access-Control-Allow-Origin" content="">
<meta http-equiv="content-security-policy">
head里面的内容如下：
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="content-security-policy">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>2015-08-08 11:01
-
-
chender - 与人为善
chrome报错？如果你的网页不是在5+的环境下运行的，肯定会有跨域问题；
注意用hbuilder做开发和使用5+完全是两个问题；
在5+的环境下使用mui.ajax肯定是没有跨域的问题的
问题主要还是后台的表头设置，我用的是Nodejs
解决方法是先安装CORS
npm install cors
在到app.js下配置
var cors = require('cors');
app.use(cors());
这样在浏览器下就没有跨域问题了
我用的c#的webservice，在用mui.ajax()访问数据时，报错： internel server error。C# 的webservice返回json数据有什么特殊要求吗
[WebMethod]
public void UserLogin(string userno, string password,int deptid)
{
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
string jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString();
string useresult = "";
try
{
var userrs = from u in userinfo.TuserinfoTB
where u.Tstatus == "1" && u.Tuserno == userno && u.Tpassword == password && u.Tdeptid==deptid
select u;
useresult = JsonConvert.SerializeObject(userrs);
}
catch (Exception ex)
{
new Exception(ex.Message.ToString());
}
HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, useresult));
HttpContext.Current.Response.End();
}
我也遇到 这个问题，求帮助！！！后台 是用C#写的WEBSERVICES
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta http-equiv="Access-Control-Allow-Origin" content="">
<meta http-equiv="content-security-policy">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<meta http-equiv="Access-Control-Allow-Origin" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/mui.min.js" ></script>
</head>
这个函数要写在那里？
public static void reSponseJson(String string,HttpServletResponse response)
chender - 与人为善
直接用mui.ajax啊，完美支持跨域
-
-
-
-
-
-
回复 1***@qq.com: mui.ajax在app里运行时自动跨域，因为此时调用的实际是plus.net的api。但必须在plus ready后调用，如果没有plus环境或plus还没ready，mui.ajax会走普通xmlhttp请求，此时在iOS的wkwebview下就会有跨域问题。
2019-10-30 16:04
r***@163.com - helloworld
楼主，Mui ajax跨域根本就没有问题，没事了 多看看MUI底层代码。
解决方案：
Muiajax正常用就可以，大家只需要把后台接口远程部署在一个测试环境的服务器上【我在这里用的是腾讯云CVS】 把后台接口部署上去，然后在自己的笔记本上USB插上手机，真机测试 一个简单页面Demo里一个ajax get请求 愉快成功！ post请求的话需要注意 Mui.ajax 需要把datatype设置为jsonp就能解决。
圣诞节快乐，everyone!
chender
如果webview中加载的是本地的html，不用plus.net也能跨域
2016-01-14 09:50
wujianfeng
那也就是说，我的项目不能放在微信公众号里运行，因为等于是普通网页浏览？如果要运行就必须要用JSONP？
2016-01-15 10:21
DCloud_heavensoft
回复 wujianfeng:或者配同域，或者jsonp，公众号一般放在一个服务器下就好了
2016-01-15 15:08
dreamboycx
回复 DCloud_heavensoft:配同域可以，但你说jsonp,现在mui好像不支持jsonp吧，我试了很多方法，html前端到java服务端，实在很伤心，不行，只好在mui里引入jquery使用了jquery的ajax方法跨域了。。。。。。。
2016-08-12 16:51
人生不设限
回复 DCloud_heavensoft:你好 我想问下 为什么我用mui.ajax在真机测试的时候还是不能跨域 总是走error
2017-01-20 15:27
1***@qq.com
回复 人生不设限: 你现在解决了吗,我也遇到啦,你最后是怎么解决的
2019-10-30 15:20