fetch api 默认 follow 重定向,但跨域重定向携带 credentials 时因 cors 头缺失会静默失败;需用 redirect: 'manual' 手动处理跳转并确保每步响应含 access-control-allow-origin 和 access-control-allow-credentials。

Fetch API 默认会跟随重定向(如 301、302),但跨域重定向 + 携带凭证(如 cookies 或 Authorization 头)时,浏览器会因安全策略拦截请求,导致失败。关键在于理解 redirect 和 credentials 选项的组合行为,以及服务端是否支持 CORS 预检与重定向响应头。
明确 redirect 选项的行为差异
Fetch 的 redirect 有三个值:follow(默认)、error、manual。跨域重定向失败通常发生在 follow 模式下:
-
follow:自动跳转,但若重定向目标是跨域且响应中缺少Access-Control-Allow-Origin,浏览器直接拒绝,不会触发then或catch(静默失败,仅控制台报 CORS 错) -
error:遇到重定向就抛 TypeError,适合需要手动处理跳转逻辑的场景 -
manual:返回 3xx 响应对象,可读取response.url和response.headers.get('Location'),再手动发起新请求
credentials 与跨域重定向的冲突点
当设置 credentials: 'include'(或 'same-origin')时,浏览器要求重定向链中**每一步响应**都必须包含有效的 CORS 头,包括:
-
Access-Control-Allow-Origin(不能为*,必须精确匹配源) Access-Control-Allow-Credentials: true- 若含自定义头(如
Authorization),还需Access-Control-Allow-Headers
常见问题:后端只在最终目标接口加 CORS 头,但中间重定向响应未返回这些头 → 浏览器中断流程。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
手动处理重定向链(推荐方案)
用 redirect: 'manual' 避开自动跳转限制,逐层检查并补全凭证:
async function fetchWithRedirect(url, options = {}) {
const response = await fetch(url, {
...options,
redirect: 'manual' // 关键:不自动跳
});
if (response.status >= 300 && response.status
<h3>服务端配合要点</h3>
<p>前端可控性有限,服务端需确保:</p>
- 所有重定向响应(3xx)也返回合法 CORS 头,尤其
Access-Control-Allow-Origin和Access-Control-Allow-Credentials - 避免多层跳转,尽量将认证/授权逻辑收敛到单次响应中(例如:登录接口直接返回 token,而非重定向到 dashboard)
- 若必须重定向,优先使用同域跳转(如
/auth/login → /dashboard),或通过前端 JS 跳转(window.location.href = url)替代 Fetch 重定向
不复杂但容易忽略
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










