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>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服务器是一个反向代理服务器但是也可以解决前端跨域的问题。配置也十分简单，配置的代码截图如下：

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

 <!--cros filter 配置 跨域请求 filter-->  <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>      <!--cors.allowOrigin指的可以通过的ip，*代表所有，可以使用指定的ip，多个的话可以用逗号分隔，默认为*-->      <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>      <!--cors.supportedMethods指的是请求方式 默认为*-->      <param-name>cors.supportedMethods</param-name>      <param-value>GET, HEAD, POST, OPTIONS</param-value>    </init-param>    <init-param>      <!--cors.supportedHeaders请求支持的头信息，默认为*-->      <param-name>cors.supportedHeaders</param-name>      <param-value>*</param-value>    </init-param>    <init-param>      <!--cors.exposedHeaders暴露的头信息，默认的empy list-->      <param-name>cors.exposedHeaders</param-name>      <param-value>X-Test-1, X-Test-2</param-value>    </init-param>    <init-param>      <!--cors.supportsCredentials支持证书，默认为true-->      <param-name>cors.supportsCredentials</param-name>      <param-value>true</param-value>    </init-param>    <init-param>      <!--cors.maxAge 最大过期时间，默认为-1-->      <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页面就无所谓了。
以上几种方式，不推荐第一种，后面三种根据项目实际情况选择。