徹底解決SSM項目前后端分離帶來的跨域問題

說明

總結了一下SSM中解決跨域的幾種方式。如果項目是用SpringBoot構建的，則有更加優雅的解決方式：https://www.cnblogs.com/phdeblog/p/13260784.html

當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。對應到當前場景就是，項目前后端分離，不管是開發階段，還是最后部署，前后端代碼都不在一個服務器上。

如果前后台是通過session進行身份認證，那么前端每次訪問后台的時候，都會攜帶一個cookie，比如ajax（axios也一樣）發起請求時設置

        xhrFields:{
            withCredentials:true
        },

 

這個時候如果后台僅僅設置 

response.setHeader("Access-Control-Allow-Origin", "*");

是沒有效果的，依然存在跨域問題。如果前端攜帶cookie，后台必須指定詳細的ip，例如把“*”換成“http://localhost:8081”。

知道這一點后，就可以根據不同的業務場景，來編寫合適的過濾器了。

版本一：簡易版

適用於開發階段，不需要記錄用戶狀態、前端沒有攜帶cookie時，則可以這么做：

過濾器

public class SimpleCorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
        response.setHeader("Access-Control-Max-Age", "0");
        filterChain.doFilter(servletRequest, servletResponse);

    }


}

如果前端攜帶cookie，可以把 response.setHeader("Access-Control-Allow-Origin", "*");中的*換成具體的ip＋端口， 例如：http://127.0.0.1:8080

配置web.xml

  <filter>
    <filter-name>SimpleCorsFilter</filter-name>
    <filter-class>czams.front.filter.SimpleCorsFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>SimpleCorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

版本二：選擇是否開啟跨域

在上面的基礎上，經過如下改造后，可在web.xml選擇是否開啟跨域

過濾器

public class SimpleCorsFilter implements Filter {

    private boolean isCross = false;

    private final List<String>allowedOrigin = Arrays.asList("http://192.168.1.202:5500","http://127.0.0.1:5500");

    @Override
    public void destroy() {
        isCross = false;
    }


    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        if(isCross){
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            HttpServletResponse response = (HttpServletResponse) servletResponse;

            String origin = request.getHeader("Origin");

            response.setHeader("Access-Control-Allow-Origin", allowedOrigin.contains(origin) ?origin:"");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Allow-Headers",
                    "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
            response.setHeader("Access-Control-Max-Age", "0");
            response.setHeader("Access-Control-Allow-Credentials" , "true");
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }


    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        String isCrossStr = filterConfig.getInitParameter("isCross");
        isCross = isCrossStr.equals("true");
    }


}

在Arrays.asList()方法里配置ip。

web.xml

  <filter>
    <filter-name>SimpleCorsFilter</filter-name>
    <filter-class>czams.front.filter.SimpleCorsFilter</filter-class>
    <init-param>
      <param-name>isCross</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>SimpleCorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

通過配置web.xml中的isCross變量選擇是否開啟跨域。

版本三：在web.xml中配置ip地址

如果覺得在代碼里改ip太麻煩了，也可以選擇從配置文件中讀取

過濾器

public class SimpleCorsFilter implements Filter {

    private boolean isCross = false;

    private List<String>allowedOrigin = null;

    @Override
    public void destroy() {
        isCross = false;
    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;

        String origin = request.getHeader("Origin");

        response.setHeader("Access-Control-Allow-Origin", allowedOrigin.contains(origin) ?origin:"");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
        response.setHeader("Access-Control-Max-Age", "0");
        response.setHeader("Access-Control-Allow-Credentials" , "true");
        filterChain.doFilter(servletRequest, servletResponse);

    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        String isCrossStr = filterConfig.getInitParameter("isCross");
        isCross = isCrossStr.equals("true");

        String origin = filterConfig.getInitParameter("origin");
        String[] split = origin.split(",");
        allowedOrigin = Arrays.asList(split);
    }

}

web.xml

注意逗號隔開，不加引號

  <filter>
    <filter-name>SimpleCorsFilter</filter-name>
    <filter-class>czams.front.filter.SimpleCorsFilter</filter-class>
    <init-param>
      <param-name>isCross</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>origin</param-name>
      <param-value>http://127.0.0.1:5500,http://192.168.1.202:5500,http://localhost:5500</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>SimpleCorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

其他

如果不想自己寫，也可以導一下別人的包，配置一下過濾器即可

添加依賴

    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.5</version>
    </dependency>

    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>java-property-utils</artifactId>
      <version>1.10</version>
    </dependency>

web.xml

  <filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
      <param-name>cors.allowOrigin</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>cors.supportedMethods</param-name>
      <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
    </init-param>
    <init-param>
      <param-name>cors.supportedHeaders</param-name>
      <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
    </init-param>
    <init-param>
      <param-name>cors.exposedHeaders</param-name>
      <param-value>Set-Cookie</param-value>
    </init-param>
    <init-param>
      <param-name>cors.supportsCredentials</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

參數也可以根據個人需要進行適當修改。