使用Laravel的redirect()方法重定向Vue应用不生效怎么办

核心原因 #

浏览器对普通同步请求和AJAX异步请求的302状态码处理逻辑不同：

• 你直接在浏览器地址栏访问接口、提交原生表单这类同步请求，收到302状态码时，浏览器会自动读取响应头的Location字段，触发全局页面跳转
• Vue侧调用接口用的是axios、fetch等异步AJAX工具，这类请求由浏览器的AJAX引擎处理，默认只会自动跟随302请求拉取目标地址的返回内容，不会触发全局页面跳转，所以你看不到页面变化。

解决方案 #

方案1：后端返回跳转标识，前端统一控制跳转（推荐）

调整Laravel后端逻辑，放弃直接返回redirect()响应，改为返回带跳转地址的JSON结构：

return response()->json([
    'code' => 30200,
    'redirect_url' => '你的目标跳转地址'
]);

在Vue的请求拦截器中统一识别该标识，主动触发页面跳转，以axios为例：

axios.interceptors.response.use(response => {
    // 匹配跳转标识后执行全局跳转
    if (response.data.code === 30200) {
        window.location.href = response.data.redirect_url
        return Promise.reject(new Error('跳转处理中'))
    }
    return response
}, error => {
    return Promise.reject(error)
})

方案2：非无刷新场景用原生表单提交

如果你的请求场景不需要无刷新交互，直接用原生<form>标签的submit动作提交请求，浏览器会按照同步请求的逻辑自动处理302跳转，和地址栏直接访问的效果一致。

内容的提问来源于stack exchange，提问作者unitSphere