跨域(二):CORS 解决跨域问题

在上一篇 文章 中,讲到了利用 JSONP 来解决跨域问题。

由于 JSONP 只支持 GET 请求 ,并且前后端代码都需要改动,因此推荐利用 CORS 来解决跨域问题。

CORS 简介

CORS 是一个 W3C 标准,全称是“跨域资源共享”(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。

更多的介绍可以看阮一峰老师的 博文

用法

1.传统java代码

在 Java 中,我们写下面这个过滤器,就可以完全解决跨域的问题了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CrosFilter implements Filter {

@Override
public void init(FilterConfig filterConfig) throws ServletException {

}

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {

HttpServletResponse res = (HttpServletResponse) response;
HttpServletRequest req = (HttpServletRequest) request;

//带cookie的时候,origin必须是全匹配,不能使用*
String origin = req.getHeader("Origin");
if (!org.springframework.util.StringUtils.isEmpty(origin)) {
res.addHeader("Access-Control-Allow-Origin", origin);
}
res.addHeader("Access-Control-Allow-Methods", "*");

// 支持所有自定义头和预检命令(非简单请求会有预检命令)
String headers = req.getHeader("Access-Control-Request-Headers");
if (!org.springframework.util.StringUtils.isEmpty(headers)) {
res.addHeader("Access-Control-Allow-Headers", headers);
}

res.addHeader("Access-Control-Max-Age", "3600");
// enable cookie
res.addHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}

@Override
public void destroy() {

}

}

2.spring 框架解决

如果使用的是 Spring 框架的话,那就只需要一个注解就能够解决跨域的问题了@CrossOrigin

1
2
3
4
5
6
7
8
@RequestMapping("/test")
@ResponseBody
@CrossOrigin
public String test() {
Map<String, String> map = new HashMap<String, String>();
map.put("msg", "hello world!");
return JSON.toJSONString(map);
}