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.csdn.net/wqmain/article/details/8905287