ajax跨域session与cookice

最新推荐文章于 2022-07-03 15:37:14 发布

原创最新推荐文章于 2022-07-03 15:37:14 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前后台分离session跨域丢失问题

本文介绍了一种在SpringBoot后端应用中实现跨域访问的方法，并提供了前端使用AJAX进行跨域请求的具体实现。通过配置MyCrossOriginFiler过滤器，可以指定允许跨域的域名列表，同时设置了请求头来支持多种HTTP方法和头部信息，确保了跨域请求的安全性和有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 *java后台 springboot
 */
@Configuration
public class MyCrossOriginFiler implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        //允许ajax跨域的域名列表 精确到端口号
        String[] origins = {"http://localhost:8848","http://127.0.0.1:8848"};
        //获取ajax调用api的前端域名+端口号
        String myOrigin = request.getHeader("origin");
        boolean isValid = false;
        for( String ip : origins ) {
            if( myOrigin != null && myOrigin.equals(ip) ){
                isValid = true;
                break;
            }
        }
        //设置跨域域名
        response.setHeader("Access-Control-Allow-Origin", isValid ? myOrigin : "null");
        //允许跨域请求方式
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        //最大等待时间
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified,Cache-Control,Expires,Content-Type,X-E4M-With,userId,token");
        //是否支持cookie跨域(ajax请求接口)
        response.setHeader("Access-Control-Allow-Credentials","true");

        response.setHeader("Access-Control-Expose-Headers", "accesstoken");
        response.setHeader("Access-Control-Request-Headers", "accesstoken");
        response.setHeader("Expires", "-1");
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("pragma", "no-cache");

        //请求放行
        chain.doFilter(req, res);
    }
}

//前端ajax

import './jquery.js'

let request = (params) => {
   return new Promise((resolve, reject) => {
       $.ajax({
           xhrFields:{withCredentials:true},//允许跨域
           crossDomain: true,
           type: params.type,
           url: params.url,
           data: params.data,
           dataType: "json",
           success: resolve,
           error: reject
       })
   })
}

export {
request
}