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 —— 跨域请求遇到的问题,服务接口返回View 对象才成功
- 浏览器同源策略以及跨域请求时可能遇到的问题
- ajax请求中遇到的跨域问题的解决办法(jsonp)
- ionic+nodejs开发遇到的跨域和post请求数据问题
- 网页跨域请求问题之jsonp原理分析
- jsonp跨域请求的问题
- ajax请求解决跨域问题 摒弃jsonp方式
- jsonp解决跨域请求问题
- 通过jsonp解决ajax的跨域请求问题
- 通过jsonp解决ajax的跨域请求问题
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
- jsonp跨域请求问题
- 转载:ionic+nodejs开发遇到的跨域和post请求数据问题
- ajax请求跨域问题-通过jsonp方式解决
- ionic+nodejs开发遇到的跨域和post请求数据问题
- jsonp解决跨域请求问题
- 跨域请求问题以及相关解决方法之JSONP
- 今天工作需要调用一个c++程序,以给那个程序发送请求的方式,遇到了跨域问题
- 远程跨域请求方法及其中遇到的问题
- 写html5 遇到的ajax请求跨域问题,访问本地数据库问题