疯子
疯子
  • 发布:2015-01-19 16:32
  • 更新:2019-10-30 16:03
  • 阅读:46053

mui ajax 跨域问题如何解决!!!!

分类:MUI

mui ajax 跨域问题如何解决!!!!

2015-01-19 16:32 5 条评论 负责人:无 分享
已邀请:

最佳回复

DCloud_heavensoft

DCloud_heavensoft

mui.ajax在app里运行时自动跨域,因为此时调用的实际是plus.net的api。但必须在plus ready后调用,如果没有plus环境,mui.ajax会走普通xmlhttp请求,此时在iOS的wkwebview下就会有跨域问题。
而普通浏览器里运行时,根本没有plus环境,只会走浏览器的网络。如果不同域,则需要服务器配jsonp来完成跨域。

注意在边改边看里运行的是普通浏览器模式。
如果把5+app改造成微信公众号,或者配同域,或者jsonp。一般放在一个服务器下就不存在跨越问题了。

  • 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

  • 717554579@qq.com

    回复 DCloud_heavensoft:你好 我想问下 为什么我用mui.ajax在真机测试的时候还是不能跨域 总是走error

    2017-01-20 15:27

  • 1415413020@qq.com

    回复 717554579@qq.com: 你现在解决了吗,我也遇到啦,你最后是怎么解决的

    2019-10-30 15:20

踩着单车载着猪

踩着单车载着猪

app中使用的是plus.net.XMLHttpRequest,支持跨域的
在没有plus的环境下~用jsonp传输吧

智学无忧

智学无忧

找到源码 mui.js,大概在2968行,把 setHeader('X-Requested-With', 'XMLHttpRequest'); 这段代码注释掉。
本人亲测可以。

  • 智学无忧

    确实可以啊,好神奇啊!

    2017-10-12 23:06

  • 随风而行

    66 困扰两天 终于解决了。就不知道是为什么

    2018-03-09 12:59

avst

avst

我在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就行了

thinkphp_

thinkphp_

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的话数据量不能太大,希望能帮到你们

张剑

张剑

你这个跨域的问题解决了么?我今天也遇到了

  • 疯子 (作者)

    mui支持跨域

    2015-01-28 17:50

  • 妙妙

    跨域怎么处理

    2015-04-28 14:43

alongSelf

alongSelf

楼主 解决了 跟俺们说一下 感激不尽

alongSelf

alongSelf

我的问题已经解决

后台代码如下:
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>

  • Williebwl

    我也这样试过了,咋还不行

    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, "&lt;").replace(/>/g, "&gt;");

    }

    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

  • alongSelf

    问题出在:一定要在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

  • 好冷

    是在请求的页面中的head里加,还是在响应的页面里加?

    2015-09-08 10:07

  • dreamboycx

    回复 好冷:看他说的好像是在请求的页面里加,但是没什么卵用啊,还是请他给解释下吧?

    2016-08-12 16:55

aaaa

aaaa

支持跨域的

chender

chender - 与人为善

chrome报错?如果你的网页不是在5+的环境下运行的,肯定会有跨域问题;
注意用hbuilder做开发和使用5+完全是两个问题;
在5+的环境下使用mui.ajax肯定是没有跨域的问题的

  • RickSun

    如果说在chrome报错我感觉正常,但是在html5+ 报的却是 parsererror

    2015-11-03 14:35

  • chender

    parsererror是因为指定了返回时的类型是json格式,但是实际服务端返回的不是json格式吧

    2015-11-03 17:47

kain

kain

问题主要还是后台的表头设置,我用的是Nodejs
解决方法是先安装CORS
npm install cors
在到app.js下配置
var cors = require('cors');
app.use(cors());
这样在浏览器下就没有跨域问题了

northlander@126.com

northlander@126.com

刚好也在浏览器模式下调试中碰到了mui.ajax跨域的问题,打包成app就可以了。

shixy9989@sohu.com

shixy9989@sohu.com

我用的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();
}

jt_ge@hotmail.com

jt_ge@hotmail.com

我也遇到 这个问题,求帮助!!!后台 是用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)

15603833035@163.com

15603833035@163.com - 91小白

学习了!

irsly@126.com

irsly@126.com

https://blog.csdn.net/actionzxz/article/details/82597124 亲测有效,感谢作者

chender

chender - 与人为善

直接用mui.ajax啊,完美支持跨域

  • mengchengm@163.com

    真的假的 我就是用的mui.ajax还是报错

    2017-01-05 23:18

  • 717554579@qq.com

    回复 mengchengm@163.com:哥们 你的问题解决了吗 我的也是用mui.ajax一直走error,真机测试,打包也是一样

    2017-01-20 15:28

  • 437185419@qq.com

    我用c# 开发 其中用到mui.ajax在微信平台一直报服务器请求失败,目前正在调试

    2017-07-21 09:33

  • chender

    微信里面打开后没有5+的环境,所以没办法跨域

    2017-07-21 11:51

  • 1415413020@qq.com

    用了还是报错!!!

    2019-10-30 15:26

  • DCloud_heavensoft

    回复 1415413020@qq.com: mui.ajax在app里运行时自动跨域,因为此时调用的实际是plus.net的api。但必须在plus ready后调用,如果没有plus环境或plus还没ready,mui.ajax会走普通xmlhttp请求,此时在iOS的wkwebview下就会有跨域问题。

    2019-10-30 16:04

RickSun

RickSun

有没有个官方的人站出来说一下!!

有些人用mui.ajax 可以跨域
有些人就报错! 无法使用

能不能有个敢说话的出来!?

  • 在这路上飘歌

    我也遇到这个问题,官方的人 赶紧出来,在线等,急

    2015-11-18 15:57

  • RickSun

    mui.ajax不能在浏览器中使用....只能用在APP上

    2015-11-18 16:28

ready_liu2015@163.com

ready_liu2015@163.com

楼主,Mui ajax跨域根本就没有问题,没事了 多看看MUI底层代码。

解决方案:

Muiajax正常用就可以,大家只需要把后台接口远程部署在一个测试环境的服务器上【我在这里用的是腾讯云CVS】 把后台接口部署上去,然后在自己的笔记本上USB插上手机,真机测试 一个简单页面Demo里一个ajax get请求 愉快成功! post请求的话需要注意 Mui.ajax 需要把datatype设置为jsonp就能解决。

圣诞节快乐,everyone!

  • pengzzp@126.com

    mui.ajax支持跨域的话,后台需要怎么设置呢

    2019-11-22 09:05

该问题目前已经被锁定, 无法添加新回复