如何解决前后端对接时的跨域问题(笔者第一次尝试前后端连接,相信这篇博文会对你有所帮助)

我是小康小白,一个平平无奇的Java小白。热爱有趣的文字,生活和远方。

在这里插入图片描述

为什么要跨域?

浏览器不能执行其他网站的脚本,也就是前后端的代码运行在不同的服务器上的时候就会出现跨域问题,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

如何解决跨域问题

使用过滤器(Filter)以实现允许前端通过后端访问项目接口
  • 实现原理:Filter接口中有一个doFilter方法,当开发人员编写好Filter类实现doFilter方法,并配置对哪个web资源进行拦截后,WEB服务器每次在调用web资源的service方法之前(服务器内部对资源的访问机制决定的),都会先调用一下filter的doFilter方法。
    其中,doFilter()方法类似于Servlet接口的service()方法。当客户端请求目标资源的时候,容器就会调用与这个目标资源相关联的过滤器的doFilter()方法。
    对这里的解释

  • 参数 request, response 为web 容器或 Filter 链的上一个 Filter 传递过来的请求和相应对象;参数 chain 代表当前 Filter 链的对象。

  • 对于FilterChain接口,代表当前Filter链的对象。由容器实现,容器将其实例作为参数传入过滤器对象的doFilter()方法中。

  • 过滤器对象使用FilterChain对象调用过滤器链中的下一个过滤器,或者目标Servlet 程序去处理,也可以直接向客户端返回响应信息,或者利用RequestDispatcher的forward()和include()方法,以及HttpServletResponse的sendRedirect()方法将请求转向到其他资源。

  • 这个方法的请求和响应参数的类型是 ServletRequest和ServletResponse,也就是说,过滤器的使用并不依赖于具体的协议。

  • Filer的作用很多,可以实现字符集的统一设置以及统一控制简单WebCache,它给我们带来的好处不仅仅是减少代码量这么简单,它的出现避免了我们每个页面重复的编写相同的代码,减少了我们的工作量,而且给维护带来了极大的便利。这里由于笔者对他的了解不多,本文只实现通过它来实现前后端对接时允许不同协议端口和主机的URL访问本机的项目。

具体操作过程如下

  1. 首先在idea项目中创建一个filter包
    在这里插入图片描述
    然后在filer的位置右键新建一个Filer,然后命名
    在这里插入图片描述
    在这里插入图片描述
    此时可以看到其中生成了三个方法destroy(),doFilter(),init().

     1.destroy() 销毁时调用
     2.doFilter()过滤方法 主要是对request和response进行一些处理,然后交给下一个过滤器或
     Servlet处理
     3.init()初始化方法  接收一个FilterConfig类型的参数 该参数是对Filter的一些配置
    

2.然后在doFilter方法中添加如下代码
在这里插入图片描述

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        // 不使用*,自动适配跨域域名,避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        response.setHeader("Access-Control-Allow-Headers", headers);
        response.setHeader("Access-Control-Expose-Headers", headers);
        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令(OPTIONS)缓存时间,单位:秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie,不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");
        //参数 request, response 为web 容器或 Filter 链的上一个 Filter 传递过来的请求和相应对象;参数 chain 代表当前 Filter 链的对象。
        ////交给下一个过滤器或servlet处理
        chain.doFilter(request, response);
        //添加一个给后台的反馈
        System.out.println("过滤器已执行");

3.配置Filer(与Servlet的配置相同,有两种方式)

  • 1)使用 @WebFilter 注解,这样就不需要再去web,xml中进行配置了。
@WebFilter(filterName = "Filter")

在这里插入图片描述

  • 2)再web.xml中配置
        <filter>
            <filter-name>Filer</filter-name>
            <filter-class>YunNotes.util.filter.Filter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>Filer</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>

在这里插入图片描述
两者任选其一即可。

  • 3)运行你的项目
    当看到让下图所示的代码时就说明已成功运行
    在这里插入图片描述

补充:

对上面为什么程序回自动先运行Filter然后运行Servlet的解释
Filter中的doFilter()方法中有这样一行

//交给下一个过滤器或servlet处理
    chain.doFilter(request, response);

这说明了运行的顺序

猜你喜欢

转载自blog.csdn.net/weixin_45791445/article/details/106091088
今日推荐