记录ajax请求302跨域的解决方案——formdata

最新推荐文章于 2025-04-07 08:42:23 发布

邢思北

最新推荐文章于 2025-04-07 08:42:23 发布

阅读量7.5k

点赞数

分类专栏：项目问题记录文章标签： ajax

本文链接：https://blog.youkuaiyun.com/weixin_44477431/article/details/116930716

版权

项目问题记录专栏收录该内容

3 篇文章

订阅专栏

本文介绍了解决前端页面遇到302重定向导致的错误处理问题，通过调整前端请求方式从Ajax改为Formdata，成功实现了重定向并解决了跨域问题。

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

前两天后端同事遇到了一个问题，就是写的前端页面在发送ajax请求后，后端会给前端报302，然后让前端重定向到指定的url，但是页面一直报错。

上手看了代码后，看到他的前端ajax请求代码类似于下方代码：

$.ajax({
	type: "POST",
	url:"/requestUrl/xxx",
	data: JSON.stringify(data),
	dataType: "json",
	contentType: "application/json;charset=utf-8",
	success:function (result){
        alret("成功")
    },
    error: function (error){
    	alert("系统异常,请稍候再试!");
    },
    complete:function (jqxhr,status) {
    	if("REDIRECT" == jqxhr.getResponseHeader("REDIRECT")) { //若HEADER中含有REDIRECT说明后端想重定向，
			win.location.href = jqxhr.getResponseHeader("CONTENTPATH");//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
		}
    }
 });

请求后，前端代码一直走error的回调，既没有走success回调也没有走complete回调，按照正常的逻辑来说302后应该走complete回调做响应的处理。

于是在打印一下ajax的状态，发现XHR对象中的readyState和status都为0，那这块就有问题了，ajax的请求发送后状态为302，响应没有任何参数，但是浏览器又发送了一个指定url域名的的get请求，并提示跨域；多次尝试后，认为是ajax在发送第一个请求后，得到后端302的响应，紧接着把后端返回的重定向地址当做一个接口进行调用，发送了GET请求，中途出错了，所以进入了error的回调。

最终采用formdata的方式来调用接口，通过form标签里的action来进行调用，完美解决问题。