【备忘】浏览器jsonp解决跨域问题

很久以前遇到过，多年以后忘记了怎么做的了。

在一番测试之后解决了这个问题，原理不多说，自行百度。

这里直接上解决方法：

1、js代码改为jsonp请求方式（必须是get请求！！！）

//定义一个全局方法，供callback调用

	let handle = function(res){
		console.log('请求支持jsonp11111:');
		console.log(res);
		$("#nickname").html(res.nickname);
	}


function test(){
    //异步请求数据，
    //重点1、url的格式很重要,也可以是?name=aaa的格式
    //重点2、dataType属性=jsonp和jsonp属性=callback必须,当请求后端接口结束后，callback会被调用，handle就是被调用的上面定义的方法
    $.ajax({
        type : "GET",
        url : "http://zdht.hnlxwh.cn/index/player/getNickname/callback/handle/uid/"+agencyCode,
        contentType: "application/json;charset=utf-8",
        dataType:"jsonp",  //请求支持jsonp
        data:'',
        jsonp:'callback',  //请求支持jsonp
        success : function (res) {
            //经测试，这里是没有作用的
            console.log('请求支持jsonp:');
            console.log(res);

        },
        error:function(){
            console.log("错误");
        }
    });
}

2、PHP代码改为echo方式输出字符串

PHP代码：

/**
     * desc：接口获取玩家昵称 jsonp
     * author：wh
     * @return mixed|string
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\ModelNotFoundException
     * @throws \think\exception\DbException
     */
    function getNickname(){
        //必须
        header('content-type:text/javascript;charset=utf-8');

        $gameid = input('uid');//用于查询用户昵称

        //浏览器端传过来的回调参数名，这名字是js定义的function，jsonp执行完了之后会调用这个方法
        $callback = input('callback');

        //封装输出结果
        $arr = [
            'nickname'=>'',
        ];

        //验证
        if(empty($gameid)){
            echo $callback.'('.json_encode($arr).')';die;
        }

        //实时查询玩家昵称
        $user = ['id'=>1,'nickname'=>'测试昵称'];//这里查询数据库,为了便于测试就写死了。


        $arr['nickname'] = $user['nickname'];//取出昵称

        //用这种方式输出，因为用框架方式输出获取不到数据，且必须是字符串
        echo $callback.'('.json_encode($arr).')';die;
    }

此功能已运用于线上项目（也有优化空间）；

END

【备忘】浏览器jsonp解决跨域问题

猜你喜欢