三十三、springboot使用Filter解决前后端分离，产生的跨域问题

环境：IDEA编写后端代码，前端使用HBuilder实现。

问题描述：Failed to load http://localhost:8080/user/login: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://127.0.0.1:8020’ is therefore not allowed access.

问题产生：Ajax请求路径为 http://localhost:8080/user/login

可以查看浏览器中详细信息：
在这里插入图片描述

因为浏览器的同源策略，所谓的同源是指，域名，协议，端口相同

因此产生了跨域问题，解决方式如下：

1.在自己的项目下创建一个类，我这里是PassHttpFilter类
在这里插入图片描述
2.具体代码：

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
@WebFilter(urlPatterns = "/*", filterName = "authFilter")  //这里的“/*” 表示的是需要拦截的请求路径
public class PassHttpFilter 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.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
        filterChain.doFilter(servletRequest, httpResponse);
    }

    @Override
    public void destroy() {
    }
}

@WebFilter(urlPatterns = "/", filterName = “authFilter”)
/ 是允许拦截请求的url，表示所有的请求

authFilter 是拦截器的名称

3.在doFilter方法中添加如下代码

  HttpServletResponse httpResponse = (HttpServletResponse)servletResponse;
  httpResponse.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
  httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
  httpResponse.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");

说明：httpResponse.addHeader(“Access-Control-Allow-Origin”,“http://127.0.0.1:8020”)添加的响应的地址；

4.这样就行了，启动项目可以在窗口看到对应的Filter的启动信息，这样就解决了跨域问题，轻松做到前后端分离。

扫描二维码关注公众号，回复： 4909522 查看本文章

2018-06-22 14:46:29.965  INFO 19188 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'passHttpFilter' to: [/*]

三十三、springboot使用Filter解决前后端分离，产生的跨域问题

猜你喜欢