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

在前端和后端分离之后，前端服务器访问后台服务器代码，会出现以下错误：

解决这个问题前先了解下会出现这种错误的情况：

解决这种问题一般有以下几种方式。
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>corsfilter-name>
      <filter-class>xxx.xxxx.xxxxx.xxxx.HeadersCORSFilterfilter-class>
    filter>
    <filter-mapping>
      <filter-name>corsfilter-name>
      <url-pattern>/open/*url-pattern>
    filter-mapping>

3.使用nginx代理
nginx服务器是一个反向代理服务器但是也可以解决前端跨域的问题。配置也十分简单，配置的代码截图如下：

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

 
  <filter>
    <filter-name>CORSfilter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilterfilter-class>
    <init-param>
      <param-name>cors.allowGenericHttpRequestsparam-name>
      <param-value>trueparam-value>
    init-param>
    <init-param>
      
      <param-name>cors.allowOriginparam-name>
      <param-value>*param-value>
    init-param>
    <init-param>
      <param-name>cors.allowSubdomainsparam-name>
      <param-value>falseparam-value>
    init-param>
    <init-param>
      
      <param-name>cors.supportedMethodsparam-name>
      <param-value>GET, HEAD, POST, OPTIONSparam-value>
    init-param>
    <init-param>
      
      <param-name>cors.supportedHeadersparam-name>
      <param-value>*param-value>
    init-param>
    <init-param>
      
      <param-name>cors.exposedHeadersparam-name>
      <param-value>X-Test-1, X-Test-2param-value>
    init-param>
    <init-param>
      
      <param-name>cors.supportsCredentialsparam-name>
      <param-value>trueparam-value>
    init-param>
    <init-param>
      
      <param-name>cors.maxAgeparam-name>
      <param-value>-1param-value>
    init-param>
  filter>
  <filter-mapping>
    <filter-name>CORSfilter-name>
    <url-pattern>/*url-pattern>
  filter-mapping>

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