jsonp跨域请求报错Uncaught SyntaxError: Unexpected token :

本文详细解析了JSONP跨域请求中常见的错误“Uncaught SyntaxError: Unexpected token”,并提供了解决方案,包括前后端代码示例,强调了使用res.jsonp()的重要性。

jsonp跨域请求报错Uncaught SyntaxError: Unexpected token :遇到就记录一下:

通过自己不断倒腾和看别人的博客,总结如下:

前端代码:

<div class="container">
    <p>更新信息</p>
    <form id="form_login">
        <div class="form-group">
            <label for="compans">证券公司</label>
            <div class="input-group">
                <input type="text"  id="compans" class="form-control"  name="compans" aria-label="...">
                <select id="selected">
                    <option value="1" selected>第一创业</option>
                    <option value="2">西南证券</option>
                    <option value="3">银河证券</option>
                </select>
            </div><!-- /input-group -->
        </div>
        <div class="form-group">
            <label for="username">证券账号</label>
            <input type="text" class="form-control" name="username"  id="username" placeholder="示例:11909349858">
        </div>
        <div class="form-group">
            <label for="pwd">交易密码</label>
            <input type="password" class="form-control" name="pwd"  id="pwd">
        </div>
        <button type="submit" class="btn btn-success">提交</button>
        <button type="button" class="btn btn-default">取消</button>
    </form>
</div>
<script>
    $(function () {
        $("#compans").val($("#selected option:selected").text());
        $("#selected").change(function () {
            let val=$("#selected option:selected").text();
            $("#compans").val(val);
        });

        $('#form_login').submit(function (e) {
            e.preventDefault();
            // console.log($(this).serialize());
            $.ajax({
                type: "post",
                url: "http://localhost:1337/manage/loginn",
                data: $(this).serialize(),
                dataType: "jsonp",
                // async:'false',
                // jsonp: "callback",  //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
                // jsonpCallback:"success_jsonpCallback",  //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
                success: function(data){
                   console.log(data);
                   console.log(data.username);
                },
                error:function(){
                    alert('fail');
                }
            });
        });
    });
</script>

 后端代码:

loginn:async function(req,res){
    res.header('Access-Control-Allow-Origin', '*');
    let compans=req.query['compans'];
    let username=req.query['username'];
    let row={compans,username,flag:true};
    console.log(row);
    res.json(row);
  },

然后点提交,控制台就报错了,意思就是你返回的格式跟jsonp不匹配。

修改后:

loginn:async function(req,res){
    res.header('Access-Control-Allow-Origin', '*');
    let compans=req.query['compans'];
    let username=req.query['username'];
    let row={compans,username,flag:true};
    console.log(row);
    res.jsonp(row);
  },

发现没有,其实就改了一个,把res.json改为res.jsonp,2333333。。。。。。。其实这里正确来说就应该使用jsonp,不使用jsonp无论你怎么改,虽然可以把控制台红色错误去掉,但是会进入error函数里面去。我从控制台报错状态进入到控制台不报错然后进入error函数,最后到得到正确的返回值状态。

jsonp跨域请求讲解:

jsonp: "callback",  //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",  //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

请求的时候,默认会带上以上jsonp这个参数(jsonp=success_jsonpCallback),默认为callback,也可以自拟名字,后台接收:

let callback=req.query['callback'];值为success_jsonpCallback,它是一个字符串。

如果要上这两句那么后台可以这样写:

loginn:async function(req,res){
    res.header('Access-Control-Allow-Origin', '*');
    // let query=req.allParams();拿到全部数据
    let callback=req.query['callback'];
    let compans=req.query['compans'];
    let username=req.query['username'];
    let obj=JSON.stringify({compans,username,flag:true});
    let row=callback+"("+obj+")";
    console.log(row);
    res.jsonp(row);
  },

接收到的值为: success_jsonpCallback({"compans":"第一创业","username":"201558254008","flag":true})

自己可以动手实践一下。

借鉴博客:https://blog.youkuaiyun.com/wqmain/article/details/8905287

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值