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