使用mpvue+springboot开发微信小程序 二 后台服务跨域访问配置filter

同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

配置过滤器实现跨域访问

因为同源策略的限制，前后端分离后，数据不能正确返回给前端。所以需要在后台中加一个过滤器，接收到请求后修改请求响应头来实现跨域访问时的数据交互。

编写AccessFilter类实现Filter接口

并重写doFilter方法

@Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding(characterEncoding);
        HttpServletResponse res  = (HttpServletResponse) servletResponse;
       // res.setHeader("Access-Control-Allow-Origin", allowOrigin);
        // 响应标头指定 指定可以访问资源的URI路径
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        //响应标头指定响应访问所述资源到时允许的一种或多种方法
        res.setHeader("Access-Control-Allow-Methods", allowMethods);
        //设置 缓存可以生存的最大秒数
        res.setHeader("Access-Control-Max-Age", maxAge);
        //设置  受支持请求标头
        res.setHeader("Access-Control-Allow-Headers", allowHeaders);
        res.setCharacterEncoding(characterEncoding);
        filterChain.doFilter(servletRequest, res);
    }

           

application.yml中配置跨域参数

#跨域参数
response:
  header:
   # allowOrigin: ${response.allowOrigin}
    allowCredentials: true
    allowMethods: POST,PUT, GET, OPTIONS, DELETE
    maxAge: 3600
    allowHeaders: x-requested-with,content-type
    characterEncoding: utf-8
           

至此跨域配置完成，跨域访问时数据就可以正常返回给前端了。