同一局域网内前后端联调 跨域问题解决

同一局域网 前后端联调 跨域问题解决

最近在开发一个新项目，因为周期比较短，也没有时间去做自动化部署，直接前后端都在本地开发，前端同学直接调用我本地的接口。这时，尴尬的事情出现了，之前毫无问题的代码（CV过来的），在联调的过程中，出现了跨域问题，卡住了进度，解决好问题写篇文章记录一下。

一、登录接口报跨域错误（请求头不携带Token）

1、报错原因

预请求的请求方式，请求方法是**OPTIONS**，因为我的CorsFilter中，只放行了GET, POST, DELETE, PUT这四个请求方法，被拦截器拦截住，无法进行下一步，导致直接报错。

什么是预请求呢？

预请求就是复杂请求（可能对服务器数据产生副作用的HTTP请求方法，如put，delete都会对服务器数据进行更修改，所以要先询问服务器）。

跨域请求中，浏览器自发的发起的预请求,浏览器会查询到两次请求，第一次的请求参数是**OPTIONS**，以检测试实际请求是否可以被浏览器接受。

如图：

2、解决方法

拦截器放行OPTIONS方法。

修改前：

res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

修改后：

res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");

//或者
res.addHeader("Access-Control-Allow-Methods", "*");

二、非登录接口报跨域错误（请求头携带Token）

1、报错原因

登录接口完成后，剩下的接口就需要请求头中携带Token才可以访问，代码中需要获取Token中的信息来操作。报错原因很简单，还是CorsFilter的原因，允许的请求头参数中，没有给Authorization参数授权，导致接口被过滤器拦截。

2、解决方法

Access-Control-Allow-Headers增加Authorization授权。

修改前：

res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");

修改后：

res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,Authorization");

三、完整CorsFilter代码（借鉴即可）

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,Authorization");
        String method = ((HttpServletRequest) request).getMethod();
        if ("OPTIONS".equals(method)) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }

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

}