祭奠那些葬送在MUI搭建的webApp跨域问题上的青春

时间 2019-11-07

标签祭奠那些葬送 mui 搭建 webapp 问题青春栏目无线繁體版

原文原文链接

一.缘起

当初我也不知道是哪里不舒服,发神经选了这个***题目.个人题目告诉我要写一个移动端的项目,好嘛,移动端,一直把前端吹得无所不能的我,怎么可能会被他给难住,我三两下子就能搞好信不信,这前端的界面和后台的逻辑处理都不是大问题,首先我想要知道的是前台和后台是否能对接起来,在前端能不能把后台的数据读取出来,这才是最关键的地方,因而我就开始了做死之路...javascript

二.开发环境

前端框架:MUIphp

后台框架:TP5.1css

后台环境:phpstudyhtml

数据库:mysql前端

开发工具:HBuildervue

交互形式:接口java

三.数据库处理

为了测试简单化,我在数据库中新建了一张简单的用户表mysql

四.后台处理

我使用的是TP5.1,下面要作的工做就是链接数据库,制做接口web

1.修改TP5.1的config目录下的database.php文件,进行链接数据库,这里本身看参数配置ajax

2.在index控制器中写一个简单的测试方法

//测试接口
    public function testinterface() {
       $res= Db::table('user')->select();//获取用户表全部数据
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功获取"];//整理数据

        return json($result);//返回json数据
    }
复制代码

好了,这就是咱们的接口,作好了,如今测试一下,在浏览器中是否能够访问,也就是运行该方法看看可否正常返回数据

3.浏览器中访问接口

这里说明一下,我已经在phpstudy中配置好了一个新的站点web2.com

因此我在浏览器的地址栏中输入

http://www.web2.com/index.php/index/index/testinterface
复制代码

数据返回正常,说明这个接口时没有问题的

五.前台处理

1.新建webApp项目

打开HBuilder,点击文件,新建一个移动App项目,选择的模板是mui项目,完成

2.新建测试页面testinterpace.html

在刚才建立的移动App项目的根目录下,新建HTML文件,选择含mui的html,完成

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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" />
	</head>

	<body>
		<div class="test"><button id="btntest">发起请求</button></div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/fn_back.js"></script>
		<script type="text/javascript"> // MUI页面初始化函数 mui.init({ /*设置各类手势操做的开关*/ gestureConfig:{ tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false wipe: true, //默认为true drag: true, //默认为true hold:false,//默认为false，不监听 release:false//默认为false，不监听 } }); //给按钮绑定一个方法用来发起ajax请求  mui(".test").on('click','#btntest',function(){ mui.ajax({ url : 'http://www.web2.com/index.php/index/index/testinterface',//请求路径； type : 'get',//表示调用get方法请求； dataType:'json',//表示以json形式接受返回参数 success : function(data){//请求成功，返回函数 console.log("success"); }, error : function(xhr,type,errorThrown){//请求失败，返回函数 alert("erro"); } }); }); </script>
	</body>

</html>
复制代码

3.浏览器测试

在浏览器中运行testinterpace.html,点击页面中的按钮

好了,出现下面的问题,这将是咱们惨案的开始

很明显,跨域问题

六.后台处理跨域

通常来讲,咱们在制做接口的时候,就要考虑该接口的跨域问题,下面我修改index控制器中的测试方法

//测试接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功获取"];
		// 设置响应头
        $headers = [
            'Access-Control-Allow-Origin'=>'*',
            'Access-Control-Allow-Methods'=>'*',
            'Access-Control-Allow-Credentials'=>'false',
            'Access-Control-Allow-Headers'=>'content-type'
        ];		
        return json($result)->header($headers);
    }
复制代码

这个解决方案叫作CORS方案

原理比较复杂，我不作解释 ,可是实现比较简单：

浏览器端都有浏览器自动完成，咱们无需操心
服务端添加一些头信息就能够

七.从新浏览器测试

世纪惨案,仍是报和没有作跨域处理以前同样的错误,到了这里就开始寻找另外一种解决方案,通过大量的查找资料,发现,事实上，TP5.1已经帮咱们写好了CORS的跨域, 只须要在路由的后面加上allowCrossDomain()就能够了

八.添加路由

在添加路由以前,要把以前作的CORS跨域处理注释或者删掉

//测试接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功获取"];
        return json($result);
    }
复制代码

在TP5.1根目录下route目录下的route.php文件中,添加下列代码

Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
复制代码

九.从新浏览器测试

依然没有解决问题,仍是同样的错误,跨域问题没有解决

十.漫长的查资料过程

到了这里,个人心里是绝望的,由于在上面两个尝试的解决方案出来以前,也是查了不少的资料,不断的测试,这两个方案在vue环境中发起ajax请求是能够正常解决问题的,等我有空,我再写一篇文章总结一下在vue中是怎么配合这两种方案的,可是为何在MUI中就不行了呢?

我开始把注意力转到前端,莫不是个人ajax代码写的有问题,仍是前端也要作一些处理

HBuilder社区有人讨论了这个问题,对于解决方案,有些人只言片语,又不断测试一波,仍是没有解决,搞得我都想打他们了,测试就是这样,感受就是无底洞,搞了一天没有搞好

因而,我只能回去看看文档关于ajax的介绍了,最后在文档中看到发起请求时能够设置crossDomain:true,使得强制跨域

十一.修改前端`ajax`

注意请求路径修改为路由的配置的路径

mui(".test").on('click','#btntest',function(){
    mui.ajax({
        url : 'http://www.web2.com/index.php/testinterface',//请求路径；
        type : 'get',//表示调用get方法请求；
        crossDomain:true,//开启强制跨域
        dataType:'json',//表示以json形式接受返回参数
        success  : function(data){//请求成功，返回函数
            console.log(data);

       },
        error  : function(xhr,type,errorThrown){//请求失败，返回函数
            alert("erro"); 
        }
    });
 });
复制代码

十二.从新浏览器测试

成功返回数据

耗时两天时间,终于成功返回数据了,感动到****

十三.对比测试

1.下面我开始测试:

关闭路由,从新在index控制器中的测试方法添加回CORS跨域解决方案的代码,而且,在前端ajax代码的接口路径也给恢复成非路由的形式,从新测试看看是否能够成功返回数据

关闭路由

//Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
复制代码

添加CORS跨域解决方案的代码

//测试接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功获取"];
		// 设置响应头
        $headers = [
            'Access-Control-Allow-Origin'=>'*',
            'Access-Control-Allow-Methods'=>'*',
            'Access-Control-Allow-Credentials'=>'false',
            'Access-Control-Allow-Headers'=>'content-type'
        ];		
        return json($result)->header($headers);
    }
复制代码

修改前端ajax的url为

url : 'http://www.web2.com/index.php/index/index/testinterface',//请求路径；
复制代码

结果

返回跨域的错误提示

2.下面我开始测试:

打开路由,注释在index控制器中的测试方法中的CORS跨域解决方案的代码,而且,在前端ajax代码的接口路径使用路由配置的路径

打开路由

Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
复制代码

注释CORS跨域解决方案的代码

//测试接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功获取"];
// $headers = [
// 'Access-Control-Allow-Origin'=>'*',
// 'Access-Control-Allow-Methods'=>'*',
// 'Access-Control-Allow-Credentials'=>'false',
// 'Access-Control-Allow-Headers'=>'content-type'
// ];
// return json($result)->header($headers);
        return json($result);
    }
复制代码