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

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