您的位置:首页 > Web前端 > JavaScript

jsonp跨域请求可能遇到的问题

2017-08-02 11:06 134 查看

一、jsonp方式

1、接口只支持GET方式

2、关于回调,需要在服务端返回值外用回调方法名包裹,返回前端,看实例代码吧!

前端发起请求

function checkAjax(){
$.ajax({
type:"post",
url:"http://go366.club/jsonpTest",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数
success:function(data){
alert(data);
}
})
}
function success_jsonpCallback(data) {
alert(data.age);
}


服务端

@RequestMapping("/jsonpTest")
@ResponseBody
public String jsonpTest(HttpServletRequest request, HttpServletResponse response) {
Map<String,String> map=new HashMap<>();
map.put("username","jack");
map.put("age","21");
String callBack="success_jsonpCallback("+ JSONObject.toJSONString(map)+")";

return callBack;
}

请求成功后,success_jsonpCallback函数会被执行

二、直接使用filter拦截,允许服务端跨域

@Override
public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) resp;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
chain.doFilter(request, resp);
}



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jsonp java web 跨域 回调