React部署后axios请求失败 如何获取响应HTTP URL

本地运行正常、部署后请求失效的核心原因是混合内容（Mixed Content）拦截，叠加可能的CORS配置顺序问题：

• 本地开发环境一般运行在HTTP协议的localhost地址下，浏览器不会拦截不同协议的请求，所以可以正常访问接口。
• 生产环境前端页面通过HTTPS协议加载，浏览器安全策略默认禁止HTTPS页面发起HTTP协议的AJAX请求：代码中写的是HTTPS开头的接口地址，但接口服务端/反向代理配置了强制跳转到HTTP地址，导致请求被浏览器直接拦截。
• 额外注意：如果后端app.use(cors())配置写在了路由注册逻辑之后，CORS中间件不会生效，也会触发跨域报错。

• 验证接口协议跳转问题：在命令行执行curl -v https://recvueadmin.hellow.fr/api/question，查看响应头是否存在301/302跳转到HTTP开头地址的情况。如果存在跳转，修改Nginx/服务端配置：关闭接口的HTTPS转HTTP规则，配置反向代理时传递原始协议头proxy_set_header X-Forwarded-Proto $scheme;，同时确认域名HTTPS证书有效。
• 调整中间件顺序：Express框架下必须将app.use(cors())放在所有路由注册、业务接口中间件之前，确保跨域响应头能正确返回。如果接口需要传递Cookie、认证头，把CORS配置调整为：

app.use(cors({
  origin: true,
  credentials: true
}))

对应前端axios请求全局开启withCredentials: true即可。

• 避免硬编码接口地址：通过环境变量区分开发/生产环境的接口基地址，生产环境优先使用相对路径，通过Nginx同域代理转发接口请求，从根源避免跨域、协议不匹配问题。

axios的响应/错误对象中内置了最终请求的URL属性，即使请求过程中存在30x重定向，拿到的也是最终返回响应的真实地址，代码示例：

import axios from "axios";

// 正常响应场景
axios.get("https://recvueadmin.hellow.fr/api/question")
.then((res) => {
  // 从响应的request对象上取最终响应URL
  const finalResponseUrl = res.request.responseURL;
  console.log("最终响应地址：", finalResponseUrl);
  console.log(res);
})
.catch((err) => {
  // 接口返回4xx/5xx错误的场景
  if (err.response) {
    const errorResponseUrl = err.response.request.responseURL;
    console.log("报错对应响应地址：", errorResponseUrl);
  }
  console.log(err);
})

注意：如果请求被浏览器安全策略拦截（比如混合内容、跨域被拦截）、或者出现网络断连错误，请求没有到达服务端，无法获取到响应URL。

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