【备忘】浏览器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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SDL大华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值