$.ajax跨域问题的简单解决。

来源:互联网 发布:人工智能的好处和坏处 编辑:程序博客网 时间:2024/05/24 06:50

网上关这于这方面的问题讨论已经很多了。今天在开始展开工作之前,就已经知道有跨域的问题,只是又犯了经验注意,被这个问题又唬了一把。

我的环境jquery+springMvc。

控制层的写法是

.....

@RequestMapping(....... =RequestMethod.GET)

@ResponseBody

public  JsonResoult<List<?>> getObjecgtLIst(){

........

return jsonResult;

}


前端的写法是

$.ajax({

url:rurl,

dataType:"json",

function(result){

debugger;

console.log(result);

}

});

在浏览器中直接访问后台地址能正确显示对象信息。

但是当把这个脚本放在桌面上一个html文件中去,Debug时,发现后台已经正确返回结果,但是result未定义。由是以为是jquery引的有问题,或者是datatype,contentType等问题,弄了三个多小时。后来,换谷歌,立马提示跨域问题。因为之前的项目解决过,所以,这下就好解决了。把原来的代码拷过来,或是网上抄一段,如下:

1.Web.xml里加上一段

<filter>    <filter-name>cors</filter-name>    <filter-class>com.eliteams.quick4j.web.filter.CrossFilter</filter-class></filter><filter-mapping>    <filter-name>cors</filter-name>    <url-pattern>/*</url-pattern></filter-mapping>
2.再造个类(继续抄袭)

public class CrossFilter extends OncePerRequestFilter {    @Override    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {            // CORS "pre-flight" request            response.addHeader("Access-Control-Allow-Origin", "*");            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");            response.addHeader("Access-Control-Allow-Headers", "Content-Type");            response.addHeader("Access-Control-Max-Age", "1800");//30 min        }        filterChain.doFilter(request, response);    }}
哈哈,大功造成!

哈哈哈哈哈。。。。。。哦?!瞧道儿,慢待!咋还不行呢。

考虑是容器的事儿,之前的项目好像动了小猫,这回是不是jetty?不管了,继续抄袭!

我用提maven+jetty:run方式,所以.....

3.在pom文件中引入:

<dependency>   <groupId>org.eclipse.jetty</groupId>   <artifactId>jetty-servlets</artifactId>   <version>9.3.0.M2</version></dependency>
4.web.xml修改

<!-- jetty支持跨域访问 --><filter>    <filter-name>cross-origin</filter-name>    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>    <init-param>        <param-name>allowedOrigins</param-name>        <param-value>*</param-value>    </init-param>    <init-param>        <param-name>allowedMethods</param-name>        <param-value>GET,POST,HEAD</param-value>    </init-param>    <init-param>        <param-name>allowedHeaders</param-name>        <param-value>X-Requested-With,Content-Type,Accept,Origin</param-value>    </init-param></filter> <!--此处表示jetty中的所有url都可以支持跨域 --><filter-mapping>    <filter-name>cross-origin</filter-name>    <url-pattern>/*</url-pattern></filter-mapping>
再次debug, 终于见到亲人了。

原创粉丝点击