Vue/Nuxt项目中Fetch/Axios发GET请求遇302重定向失败但Postman和浏览器正常

问题原因 #

你遇到的报错是两个核心限制共同导致的：

• 浏览器同源策略限制：地址栏直接访问、Postman发起请求不受同源策略约束，所以可以正常处理302重定向并拿到结果；但前端页面发起的AJAX请求受跨域规则限制，GitHub的公开页面/资源默认没有配置允许你站点域名的CORS响应头，所以请求直接被浏览器拦截，抛出ERR_FAILED错误。
• 重定向配置问题：默认情况下fetch、axios的浏览器端版本自动跟进重定向的逻辑会受跨域规则限制，跨域场景下即使拿到302响应，后续重定向请求也会被拦截。

可行解决方案 #

方案1：通过Nuxt服务端代理转发请求（最适配你的技术栈，推荐） #

Nuxt框架支持服务端代理，服务端发起的请求不受浏览器同源策略限制，可以正常跟进重定向：

• 若你使用Nuxt2，先安装@nuxtjs/proxy模块，再在nuxt.config.js中添加如下配置：

export default {
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/github-proxy': {
      target: 'https://github.com',
      pathRewrite: { '^/github-proxy': '' },
      changeOrigin: true,
      followRedirects: true
    }
  }
}

前端发起请求时，把原来的https://github.com/xxx格式的URL替换为/github-proxy/xxx即可正常拿到结果。

• 若你使用Nuxt3，直接在server/api目录下新建转发接口，用服务端内置的$fetch发起请求，自动跟进重定向后将结果返回给前端即可。

方案2：调整请求参数（仅适用于目标地址支持CORS的场景） #

如果请求的目标地址已经配置了允许你站点跨域访问，可手动指定重定向相关参数：

• Fetch配置：

fetch(inputURL, {
  method: 'GET',
  redirect: 'follow'
})

• Axios配置：

axios.get(inputURL, {
  maxRedirects: 5
})

注意该方案对GitHub公开默认资源不生效，因为GitHub没有配置允许第三方站点跨域请求普通页面/资源的CORS头。

优化建议 #

如果你是要获取GitHub仓库的相关数据，建议直接调用GitHub官方开放的REST API，接口直接返回结构化JSON数据，不会出现302重定向问题，同时支持携带身份token提高请求频率限制。

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