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