CORS跨域问题记录和总结

在前后端分离项目中遇到跨域问题记录

此次公司项目用的框架为 SpringBoot+MyBatis+Shiro+LayUI, 接口统一使用 AJAX, 在未加入登录功能前前端依然能够正常访问后端接口, 但是在加入登录后, 服务器端向前端返回一个 Token作为登录令牌, 前端登录后每次请求需使用此 Token先进行判断操作, 但是在一直报 CORS跨域问题, 在网上看了两天博客, 最后还是依靠 FireFox自身的报错信息解决的, 开始报错信息为 Access-Control-Allow-Origin不能为 *, 根据看了两天博客的经验得出, Access-Control-Allow-Origin值一般为 *或者 Origin(即一级路径)

HttpServletRequest reqs = (HttpServletRequest) request;
response.setHeader("Access-Control-Allow-Origin", reqs.getHeader("Origin"));

然后看到依然报跨域问题, Access-Control-Allow-Headers不支持 xxx(此处为你自定义的请求头), 此处我想到前端需要传入一个 Token给服务器, 而这个 Token是设置为一个单独请求头的, 所以在修改 Access-Control-Allow-Headers值后一切都正常了

response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,token, Accept,WG-Token");

请求时请求头有字段为 token: xxxxxx, 所以在此处单独加入 token, 如果你在 Header携带其他字段, 也需要在此处加入相对应字段.

此处有一个问题, 之前打算将 Token放在 Cookie中返回客户端, 但是登陆后客户端拿到了 set-cookie字段却存不进本地 cookie中. 此处望有大佬解疑

以下为 CorsFilter全代码:

@Component
public class CorsFilter implements Filter{
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {

    }

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

        HttpServletResponse response = (HttpServletResponse) servletResponse;

        HttpServletRequest reqs = (HttpServletRequest) request;

        String origin = reqs.getHeader("Origin");
        System.out.println(origin);

        // 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
        response.setHeader("Access-Control-Allow-Origin", reqs.getHeader("Origin"));

        // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
        // 设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");

        // 该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
        // Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，
        // 就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,token, Accept,WG-Token");
        filterChain.doFilter(request, response);

    }
}

在这两天解决 BUG时找到一篇跨域问题的文章本人阅后受到很多启发, 传送门: ajax跨域, 这应该是最全的解决方案了