REST API交互中AJAX请求完成后跨域跳转的实现方案咨询

优先选择服务端在响应体返回跳转URL，前端通过JavaScript调用window.location实现跨源跳转的方案，不要尝试用HTTP 3xx重定向处理AJAX请求触发的页面跳转需求。

• 浏览器对XMLHttpRequest、fetch发起的AJAX请求有默认的3xx处理逻辑：收到3xx响应后会自动向Location头指定的地址发起新请求，整个重定向过程对前端JavaScript完全透明，你无法直接拿到原始3xx响应的状态码和Location头内容，最终只能拿到重定向链路末尾请求的响应结果。
• 如果重定向目标是跨源地址，只要目标服务没有配置允许你当前站点的CORS规则，浏览器会直接拦截重定向后的请求抛出CORS错误，前端只能感知到请求失败，完全拿不到跳转地址，自然无法完成页面跳转。
• 浏览器的3xx重定向自动跳转逻辑，仅作用于顶层页面导航、表单提交这类非AJAX场景，AJAX请求的所有重定向处理都被限制在请求内部链路中，永远不会触发顶层页面的自动跳转，和你需要的用户跳转场景完全不匹配。

补充：所谓“REST体系中重定向没有作用”的说法并不完全准确，3xx响应在API场景下可用于接口地址迁移、临时路由转发这类纯服务端API层的逻辑，但确实不适用于触发页面跳转的场景。

1. 服务端处理完AJAX提交的payload后，返回200状态码，在响应体中通过约定字段返回目标跳转地址，示例响应结构如下：

{
  "status": "success",
  "redirect_url": "https://target-domain.com/path"
}

2. 前端在AJAX请求的成功回调中判断是否存在跳转地址，存在时直接执行跳转即可，跨源场景也能正常生效：

// fetch 示例
fetch('/api/submit', {
  method: 'POST',
  body: JSON.stringify(payload)
}).then(res => res.json())
.then(data => {
  if (data.redirect_url) {
    window.location.href = data.redirect_url
  }
})

如果一定要用HTTP 3xx实现，你可以将fetch请求的redirect参数设置为manual，此时浏览器不会自动跟随重定向，你可以手动读取原始响应的Location头完成跳转。但该方案要求跨源目标服务配置CORS规则暴露Location响应头，否则你依然无法读取该头内容，落地成本远高于直接返回跳转URL，不建议使用。

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