浏览器中Axios调用外部API遇307/401问题求解决方案

针对你遇到的浏览器端请求307/401问题，核心是要避免发送API不接受的Cookies和Referer头，以下是具体解决方案：

• 关闭自动携带Cookies：浏览器开启withCredentials: true时会自动发送当前域名下的Cookies，而外部API不接受这些内容，因此必须将该配置设为false，同时清空相关的XSRF配置防止额外Cookie发送。
• 移除或修改Referer头：浏览器默认会自动添加当前页面的Referer头，你可以在请求头中显式设置为空（或符合API要求的值），避免浏览器自动填充。

修改后的Axios请求代码如下：

const result = await axios.get(
  `http://external-api-url-here.com/example-endpoint/xyz`,
  {
    headers: {
      "Content-Type": "application/json",
      "App-key": 'ExAmPl3_KeY-H3r3',
      "key-platform": 'admin-desktop',
      // 清空Referer头，部分浏览器若不允许空值，可设置为API根域名
      Referer: ''
    },
    // 禁止自动携带Cookies
    withCredentials: false,
    // 清空XSRF相关配置，防止额外Cookie发送
    xsrfCookieName: '',
    xsrfHeaderName: ''
  }
);

额外验证步骤 #

1. 打开浏览器开发者工具的Network面板，发送请求后查看请求头，确认Cookie和Referer头已被移除或修改为预期值。
2. 若部分浏览器无法完全清空Referer，可尝试将其设置为目标API的根域名（如http://external-api-url-here.com/），确保符合API的校验规则。

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