Next.js中Axios GET请求路径末尾自动加斜杠的移除方法

方法1：自定义参数序列化器（paramsSerializer） #

Axios默认的参数序列化逻辑可能会在路径末尾补加斜杠，你可以自定义paramsSerializer来规避这个行为：

import axios from 'axios';

const ping = axios.get('http://127.0.0.1:5000/api/quote', {
  params: {
    id: query.quote_id,
  },
  paramsSerializer: (params) => {
    const paramKeys = Object.keys(params);
    if (paramKeys.length === 0) return '';
    // 手动拼接参数，确保路径末尾无多余斜杠
    return '?' + paramKeys.map(key => `${key}=${encodeURIComponent(params[key])}`).join('&');
  }
}).then((response) => {
  console.log(response.data);
}).catch((e) => {
  console.log(e);
});

方法2：禁用URL规范化（Axios v1.6.0+支持） #

Axios默认会对URL做规范化处理（比如自动补全斜杠），你可以创建自定义Axios实例并关闭该功能：

import axios from 'axios';

const apiClient = axios.create({
  normalizeUrl: false, // 禁用URL规范化
});

const ping = apiClient.get('http://127.0.0.1:5000/api/quote', {
  params: {
    id: query.quote_id,
  }
}).then((response) => {
  console.log(response.data);
}).catch((e) => {
  console.log(e);
});

方法3：手动拼接URL参数（临时方案） #

如果不想修改Axios配置，也可以直接把参数拼接到URL中，跳过params选项：

import axios from 'axios';

const ping = axios.get(`http://127.0.0.1:5000/api/quote?id=${encodeURIComponent(query.quote_id)}`)
  .then((response) => {
    console.log(response.data);
  }).catch((e) => {
    console.log(e);
  });

补充说明 #

Postman不会自动修改请求路径格式，因此能正常请求；而Axios的URL规范化逻辑是为了统一格式，但部分后端框架会将带斜杠和不带斜杠的路径视为不同路由，从而返回500错误。

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