1,问题出现
在前台页面使用ajax跨域异步请求时,浏览器console出现
"Access-Control-Allow-Origin"设置不被允许的提示2,解决方法
(1)首先确定是ajax跨域问题,我们采用Filter方式处理,编写过滤器SystemFilter.class ;
public class SystemFilter implements Filter{ private String allowMethods; private String allowCredentials; private String allowHeaders; private String exposeHeaders; @Override public void init(FilterConfig filterConfig) throws ServletException { allowMethods = filterConfig.getInitParameter("allowMethods"); allowCredentials = filterConfig.getInitParameter("allowCredentials"); allowHeaders = filterConfig.getInitParameter("allowHeaders"); exposeHeaders = filterConfig.getInitParameter("exposeHeaders"); } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) req; HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); if (StringUtils.isNotEmpty(allowMethods)) { response.setHeader("Access-Control-Allow-Methods", allowMethods); } if (StringUtils.isNotEmpty(allowCredentials)) { response.setHeader("Access-Control-Allow-Credentials", allowCredentials); } if (StringUtils.isNotEmpty(allowHeaders)) { response.setHeader("Access-Control-Allow-Headers", allowHeaders); } if (StringUtils.isNotEmpty(exposeHeaders)) { response.setHeader("Access-Control-Expose-Headers", exposeHeaders); } chain.doFilter(request, response); } @Override public void destroy() { } }
(2)然后在web.xml里添加过滤器;
<filter> <filter-name>systemFilter</filter-name> <filter-class>com.ittest.secrity.SystemFilter</filter-class> <init-param> <param-name>allowMethods</param-name> <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value> </init-param> <init-param> <param-name>allowCredentials</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>allowHeaders</param-name> <param-value>Origin,X-Requested-With,Content-Type,Accept</param-value> </init-param> </filter> <filter-mapping> <filter-name>systemFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
(3)其次前台页面ajax处理以及快速获取表达数据;
jQuery3.3.1版本,ajax的js部分
<script> function subOrder() { $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $.ajax({ //几个参数需要注意一下 contentType:"application/json", url: "" ,//url async:true, type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 data: JSON.stringify( $('#form').serializeObject()), success: function (result) { console.log(result);//打印服务端返回的数据(调试用) // var jsonText = JSON.stringify(result); // var obj = JSON.parse(jsonText); alert(result); ; }, error : function() { alert("异常!"); } }); } </script>
页面表单信息;
<form id="form" onsubmit="return false" method="post"> 客户号: <input type="text" id="field041" name="field041" value="80000001" /><br/> 商户号 : <input type="text" id="field042" name="field042" value="100006700000106" /><br/> 商户订单号:<input type="text" id="field048" name="field048" value="<%=new SimpleDateFormat("YYYYMMDDHHMMSSMS").format(new Date(new Date().getTime())) %>" /><br/> 姓名: <input name="name" value="全渠道"/><br/> 身份证号: <input name="idNumber" value="341126197709218366"/><br/> 银行卡号: <input name="accNo" value="6216261000000000018"/><br/> 手机号: <input name="telNo" value="13552535506"/><br/> 商品名称: <input name="field057" value="shopping"/><br/> 支付结果通知地址: <input name="field060" value=""/><br/> <button onclick="subOrder()">获取订单号<tton> </form>
(5)ajax请求的controller;
@RequestMapping(value = "/",produces={"application/json;charset=utf-8"}) @ResponseBody public Response ajax(@RequestBody String data){ Response response = new Response(); Map<String, String> dataMapOri = JsonUtils.jsonToObject(data, HashMap.class); response.setName(dataMapOri.get("name")); return response; }
Response为返回的vo实体类
本文介绍了一种通过配置过滤器解决Ajax跨域问题的方法,包括编写Filter代码、配置web.xml以及实现前后端交互。

被折叠的 条评论
为什么被折叠?



