AJAX跨域问题

最新推荐文章于 2024-04-13 18:12:53 发布

瞎J2Coding

最新推荐文章于 2024-04-13 18:12:53 发布

阅读量1.3k

点赞数 1

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44038330/article/details/123472439

版权

本文介绍了前端跨域问题的原因，主要是由于浏览器的同源策略和XHR请求导致的安全限制。为了解决这个问题，文章提供了一个在后端使用Spring框架注册CORS过滤器的示例，允许指定域名的跨域请求，并处理带Cookie的跨域情况。通过设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials等头部信息，确保了安全的跨域通信。

摘要由CSDN通过智能技术生成

首先奉上思维导图

什么是AJAX跨域问题

主流开发趋势是前后端完全分离，而前端要访问后端接口时就会产生跨域问题。

为什么会发生ajax跨域问题

浏览器限制
跨域
XHR（XMLHTTPRequest）请求

同时满足才有可能发生跨域安全问题

大部分内容都在思维导图上了，下面记录几个细节

被调用方-Filter解决方案

修改服务器端代码

@Bean
    public FilterRegistrationBean registerFilter() {
        FilterRegistrationBean bean = new FilterRegistrationBean();
        bean.addUrlPatterns("/*");
        bean.setFilter(new CrosFilter());
        return bean;
    }

CrosFilter类

public class CrosFilter implements javax.servlet.Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse res =(HttpServletResponse) servletResponse;
        res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");//允许该域跨域调用
        res.addHeader("Access-Control-Allow-Methods","GET");//允许跨域调用的方法
        filterChain.doFilter(servletRequest,servletResponse);
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

带Cookie的跨域

cookie只能获取自己域的，所以跨域cookie是被调用端的cookie

前端代码

$.ajax({
                type:"get",
                url:base+"/getCookie",
                xhrFields:{
                    withCredentials:true//ajax请求带上cookie
                },
                success:function (json){
                    result=json;
                }
            });

带cookie跨域的时候，origin必须是全匹配，不能使用*

HttpServletRequest req=(HttpServletRequest) servletRequest;
String origin = req.getHeader("Origin");
if (!org.springframework.util.StringUtils.isEmpty(origin)){
res.addHeader("Access-Control-Allow-Origin",origin );//允许该域跨域调用
        }
res.addHeader("Access-Control-Allow-Credentials","true");