JavaScript发起API请求时如何处理服务器返回的URL重定向响应

浏览器对地址栏直接输入URL发起的导航请求，会自动处理两类服务端路由逻辑：

• URL 重定向（Redirect）流程
  1. 用户在地址栏输入目标URL
  2. 浏览器向对应Web服务器发起初始请求
  3. Web服务器返回带新URL的重定向响应（通常为3xx状态码+Location响应头）
  4. 浏览器自动向新URL发起请求，整个跳转过程对用户透明
  5. 新URL对应的服务端处理逻辑返回最终响应，浏览器渲染页面并把地址栏更新为最终URL
• URL 重写（Rewrite）流程
  1. 用户在地址栏输入目标URL
  2. 浏览器向对应Web服务器发起初始请求
  3. Web服务器内部按规则改写URL后直接转发给对应处理程序，不会给浏览器返回任何跳转相关响应
  4. 处理程序生成的响应直接返回给浏览器，整个过程地址栏始终显示用户最初输入的URL

所有基于浏览器标准Web API发起的异步请求（包括原生XMLHttpRequest、fetch，以及基于前者封装的jQuery $.ajax系列、axios等类库），处理重定向的逻辑和地址栏导航有本质区别：

• 同域重定向会被浏览器自动静默跟随
  只要服务端返回的3xx重定向目标是同域地址，浏览器会完全在底层完成所有跳转，JS层感知不到任何中间过程。直到拿到最后一跳的非重定向响应，才会把结果交给你写的回调函数处理。

  这里有个高频踩坑点：你在回调里拿到的xhr.status或者fetch响应对象的状态码，永远是最后一跳的结果（比如200、403、500），根本拿不到301/302这类中间重定向状态，也读不到中间跳转的Location头，整个自动跳转过程对JS是黑盒。

• 跨域重定向会触发CORS校验
  如果重定向目标是跨域地址，浏览器会直接对跳转目标做跨域权限校验：
  • 目标地址没返回合法的CORS响应头（比如Access-Control-Allow-Origin不匹配当前源），请求直接触发网络错误，JS层只能拿到请求失败的回调，读不到任何响应内容
  • 目标地址配置了合法CORS头，浏览器同样会自动跟随重定向，最终把最后一跳的响应交给JS处理
• 重定向永远不会触发当前页面导航
  不管同域还是跨域的异步请求，就算触发了重定向，也只会跟着这个异步请求走，绝对不会修改当前页面地址栏，也不会导致当前页面卸载跳转。最常见的坑就是：后端给接口返回302跳转到登录页，结果前端异步请求拿到的是登录页的HTML字符串，页面根本没跳转——因为这个重定向是XHR/fetch请求层面的，和当前页面的导航完全独立。
• 服务端URL重写对JS完全透明
  不管什么类型的异步请求，服务端内部做的URL rewrite和普通请求没有任何区别，JS只会拿到最终处理逻辑返回的响应，完全感知不到服务端内部的转发过程。

如果需要在JS请求拿到重定向要求时手动触发页面跳转，不要靠服务端给接口返回3xx响应，要改成返回200状态+自定义业务字段（比如{ "need_redirect": true, "url": "/login" }），JS读到字段后主动调用window.location.href完成跳转。

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