跨域（二）：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);
}