Nuxt.js+Axios下如何获取303重定向响应或取消默认重定向？

当然可行，你可以通过Axios的配置直接阻止自动重定向，获取原始的303响应后自行处理后续逻辑。以下是具体实现方案：

方案1：禁止自动重定向，直接获取303响应 #

Axios提供maxRedirects配置项，将其设为0即可阻止自动跟随重定向。同时需要自定义validateStatus规则，让Axios把303状态视为合法响应（默认会把3xx状态判定为错误）。

全局配置（nuxt.config.ts） #

如果希望所有请求都应用此规则，可在Nuxt全局配置中设置Axios：

export default defineNuxtConfig({
  modules: ['@nuxtjs/axios'],
  axios: {
    maxRedirects: 0, // 禁用自动重定向
    validateStatus: (status) => {
      // 接受200-399之间的所有状态码
      return status >= 200 && status < 400;
    }
  }
})

单个请求自定义配置 #

仅针对特定POST请求设置规则：

try {
  const response = await $axios.post('/target-api', requestData, {
    maxRedirects: 0,
    validateStatus: (status) => status >= 200 && status < 400
  });

  // 根据状态码处理不同业务逻辑
  if (response.status === 303) {
    const existingResourceUrl = response.headers.location;
    // 自行发起GET请求获取已存在资源，或执行其他业务逻辑
    const existingResource = await $axios.get(existingResourceUrl);
    // 处理已存在资源数据
  } else if (response.status === 201) {
    const newResourceUrl = response.headers.location;
    // 处理新建资源逻辑
  }
} catch (error) {
  // 处理真正的请求错误（如4xx/5xx状态）
}

注意事项 #

1. 跨域场景下的头信息获取：如果API与前端存在跨域，需要后端配置Access-Control-Expose-Headers: Location，否则前端无法通过response.headers.location读取到Location头。
2. Location头的URL完整性：确保后端返回的Location是完整可访问的URL；若为相对路径，需结合Axios的baseURL拼接成合法请求地址。

内容的提问来源于stack exchange，提问作者Théo Lavaux