先后端分离解决Ajax跨域问题

1、同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。如今全部支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
同源策略的目的是为了保证用户信息的安全。防止恶意的网站盗取数据。

---

2、经过CORS解决Ajax跨域

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS容许任何类型的请求。

假设环境为先后端分离的web环境：

• 前端：使用Vue的axios异步请求后台数据
• 后端：Spring+SpringMVC
• 服务器：Tomcat

注意：服务器端对于CORS的支持，主要就是经过设置Access-Control-Allow-Origin来进行的。若是浏览器检测到相应的设置，就能够容许Ajax进行跨域的访问，所以可配置过滤器的方式解决Ajax跨域。

• 一、在web.xml中配置过滤器

<!-- 支持跨域请求 -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.joker.support.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

---

• 二、实现过滤器

public class CorsFilter implements Filter {

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

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Credentials", "*");
        httpResponse.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");
        httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type," + "x-access-token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}