thinkphp，javascript跨域请求解决方案

时间：2022-04-18 03:07:56

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!');//异常抛错

		    }






  • 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

      • 

    相关文章