java前后端分离后的跨域问题解决

朱雀 2021-05-10 11:18 703阅读 0赞

在前端和后端分离之后，前端服务器访问后台服务器代码，会出现以下错误：  
![这里写图片描述][SouthEast]  
解决这个问题前先了解下会出现这种错误的情况：  
![这里写图片描述][SouthEast 1]  
解决这种问题一般有以下几种方式。  
**1.使用jsonp方式:**  
这种方式是在ajax时候设置method：jsonp。但是这种方法不能解决post方式发送的请求。  
**2.在java代码中配置servlet拦截所有请求设置Access-Control-Allow-Headers**

import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletResponse;
    public class MyFilter implements Filter { 
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
            // TODO Auto-generated method stub
        }
        @Override
        public void doFilter(ServletRequest request, ServletResponse servletResponse,
                FilterChain chain) throws IOException, ServletException {
             HttpServletResponse response = (HttpServletResponse) servletResponse;
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
                response.setHeader("Access-Control-Max-Age", "3600");
                response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
                response.setHeader("Access-Control-Allow-Credentials","true");
                chain.doFilter(request, servletResponse);
        }
        @Override
        public void destroy() {
            // TODO Auto-generated method stub
    
        }
    }

在web.xml中配置以下代码：

<filter>
          <filter-name>cors</filter-name>
          <filter-class>xxx.xxxx.xxxxx.xxxx.HeadersCORSFilter</filter-class>
        </filter>
        <filter-mapping>
          <filter-name>cors</filter-name>
          <url-pattern>/open/*</url-pattern>
        </filter-mapping>

**3.使用nginx代理**  
nginx服务器是一个反向代理服务器但是也可以解决前端跨域的问题。配置也十分简单，配置的代码截图如下：  
![这里写图片描述][SouthEast 2]

**4.cors方式**  
这种方式配置首先需要下载cors-filter-2.5.jar和java-property-utils1.10.jar导入到项目中，然后在web.xml重配置。

<filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
          <param-name>cors.allowGenericHttpRequests</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.allowOrigin</param-name>
          <param-value>*</param-value>
        </init-param>
        <init-param>
          <param-name>cors.allowSubdomains</param-name>
          <param-value>false</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.supportedMethods</param-name>
          <param-value>GET, HEAD, POST, OPTIONS</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.supportedHeaders</param-name>
          <param-value>*</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.exposedHeaders</param-name>
          <param-value>X-Test-1, X-Test-2</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.supportsCredentials</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          
          <param-name>cors.maxAge</param-name>
          <param-value>-1</param-value>
        </init-param>
      </filter>
      <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>

这种方式配置缺点是有些老版本的浏览器不能成功，但是h5页面就无所谓了。  
以上几种方式，不推荐第一种，后面三种根据项目实际情况选择。

[SouthEast]: /images/20210508/9d4da3d3e6414ef8a13eec03e880d95d.png
[SouthEast 1]: /images/20210508/02ca7d3c749a471e81d3655be2f84cd2.png
[SouthEast 2]: /images/20210508/5e5e30f5f9fb4d53bfc49d706a2a5bef.png