thinkphp，javascript跨域请求解决方案

javascript跨域请求解决方案

前言

---

• 对于很多前端或者做混合开发的同学，我们难免会遇到跨域发起请求业务，比如A站点向B站点请求数据等等。由于最近要做一个站点集群的项目，所以具体业务要求很多个站点之间的消息推送，所以难免要做跨域请求。
• 这两天我在度娘上面用 “javascript php 跨域 ajax”等关键字找了好几遍，发现真的没有一篇博客写出一个具体的解决方案（ps.最多的方案基本都是选择jsonp，我相信get满足不了大家的吧？），所以我觉得总结一下我自己遇到的坑（其实是自己修炼不够，我会乱说？），以后少走弯路。

跨域方案

---

下面是我这几天摸索出来的一些具体的解决方案，大家可以参照自己的具体业务逻辑来选用不同的解决方案。

### jsonp
***

• 我知道程序员都是猴急的人（摆脱不了猿类的本性 - -！），所以按照惯例我们先贴代码：
• 客户端：

		$.post('http://a.com',//接口URL地址
		{
			"username":"张三"//这里写你向服务器端发送的数据
		},
		function(data){
			console.log(data);
		   //回调，这里是服务器端返回的数据
		   //这就是普通的json了
		},'jsonp');

• 服务器端：

		 $callback = $_GET['callback'];
		 $username = $_GET['usernae'];
		    if(!empty($callback)){
		        $data = $username;//这是你业务逻辑处理好的数据,一般是个数组
		        header('Content-Type:Application/json;charset=utf-8');//必须设置
		        echo $callback.'('.json_encode($data).')';
		        exit();
		    }else{
		        exit('Access Denied!');//异常抛错
		    }

• 以上方案我是参照http://blog.chinaunix.net/uid-18899774-id-3915566.html的个人博客，他是解决extjs跨域问题，但是用在其他原生js亲试没有错误
• 注意事项

jsonp不管你用什么方式传送，实际都是get请求，所以大小有限制。
get请求是明文请求，除非我们加密，不然请求内容一目了然
在服务器端里面callback必须有，因为jsonp的机制其实是在请求后面加了callback的get请求

ajax（jsonp的另外一种写法）

---

• 按照管理先抛代码，客户端：

	$.ajax({
　　　　　　url: 'http://example.com',//请求地址
　　　　　　type: 'POST',
　　　　　　data: { id: idValue },
　　　　　　//调小超时时间会引起异常
　　　　　　timeout: 3000,
　　　　　　//请求成功后触发
　　　　　　dataType：jsonp,
　　　　　　success: function (data) { show.append('success invoke!' + data+'
'); },
　　　　　　//请求失败遇到异常触发
　　　　　　error: function (xhr, errorInfo, ex) { show.append('error invoke!errorInfo:' + errorInfo+'
'); },
　　　　　　//完成请求后触发。即在success或error触发后触发
　　　　　　complete: function (xhr, status) { show.append('complete invoke! status:' + status+'
'); },
　　　　　　//发送请求前触发
　　　　　　beforeSend: function (xhr) {
　　　　　　//可以设置自定义标头
　　　　　　xhr.setRequestHeader('Content-Type', 'application/xml;charset=utf-8');
　　　　　　show.append('beforeSend invoke!' +'
');
　　　　　　},
　　　　　　//是否使用异步发送
　　　　　　async: true
　　　　})

• 服务器端代码跟第一种写法一样

cors

---

• 我相信很多人跟我一样，找跨域的相关资料的时候，大神们总是摔下一句“CORS Can Solve It！”然后就没有下文了，国内文档更是是说一个单词“CORS！”，好吧，像我这样的小白找半天，终于找到找好梯子，自行google到cors的具体用法，如下：
• 客户端：

function test(){
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "http://www.example.com", true);
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			textdata = {
                "username":"张三",
                "num":"1",
                "sex":"boy"
                };
            var testdata = JSON.stringify(textdata);
			var getdata = "data=" + testdata;
			xhr.send(getdata);
			xhr.onreadystatechange = function() {
                //如果执行状态成功，那么就把返回信息写到指定的层里
                if (xhr.readyState == 4 && xhr.status == 200) {
                    	var data = xhr.responseText;
                      	$obj = eval('(' + data + ')');
                    	console.log($obj);
                }
        	}
		}

• 服务器端:

public function test(){
        $data = $_POST['data'];//接收POST数据
        $jsonData = json_decode($data,true);//把接收到的数据封装成数组形式
        //查看是否已经存在当前用户
        //$name = $jsonData['uuid']; //调取相应数据
        $outputdata['status']  = $jsonData;
        $this->ajaxReturn($outputdata);//我这里是thinkphp框架封装好的返回调用
    }

• 注意事项：

	 1.在服务器端里面加上请求头部信息：header('Access-Control-Allow-Origin: *');，允许任何站点访问，这里也可设置只允许某一个站点跨域访问。
	 2.还需要注意的是，在客户端需要先把数据变成json字符串形式在传到服务器端。

总结

• 以上就是javascript跨域请求的全部内容。
• 如果有任何疑问或者建议，请联系作者的个人邮箱（dream_zk2014@sohu.com）
• 转发请注明出处 dreamzk.cn