React+Rails API项目中如何配置Axios自动添加默认请求数据？

绝对可以！Axios的请求拦截器就是为这类统一配置场景设计的——它能帮你在请求发送到服务器之前，自动给指定类型的请求追加固定变量，不用每次写请求都手动重复添加，非常高效。下面是具体实现步骤：

1. 创建自定义Axios实例（推荐） #

首先建议创建一个自定义Axios实例，而非直接修改全局Axios，这样可以避免影响项目中其他不需要该配置的请求：

import axios from 'axios';

// 初始化自定义Axios实例，配置你的Rails API基础地址
const api = axios.create({
  baseURL: '/api' // 替换成你的Rails API实际地址
});

2. 添加请求拦截器处理数据 #

接下来给这个实例添加请求拦截器，在里面判断请求类型，并自动追加固定变量：

// 注册请求拦截器
api.interceptors.request.use(
  (config) => {
    // 定义需要追加的固定变量
    const fixedAddedData = { added_data_from_config_axios: 'some_variable' };

    // 只针对POST、DELETE、PUT、PATCH这几种请求类型处理
    const targetMethods = ['post', 'delete', 'put', 'patch'];
    if (targetMethods.includes(config.method?.toLowerCase())) {
      // 分两种情况处理请求数据：普通JSON对象 / FormData（文件上传场景）
      if (config.data instanceof FormData) {
        // 如果是FormData格式，直接append键值对
        Object.entries(fixedAddedData).forEach(([key, value]) => {
          config.data.append(key, value);
        });
      } else {
        // 如果是普通JSON对象，合并原有数据和固定变量
        config.data = {
          ...(config.data || {}), // 兼容没有传data的情况
          ...fixedAddedData
        };
      }
    }

    // 返回修改后的配置，继续发送请求
    return config;
  },
  (error) => {
    // 请求出错时的处理逻辑
    return Promise.reject(error);
  }
);

// 导出这个实例，项目中所有需要追加变量的请求都用它
export default api;

3. 在项目中使用这个实例 #

之后你发送请求时，直接用这个自定义实例就行，不用手动加固定变量：

// 示例POST请求
api.post('/your-endpoint', { data: 'some_data' })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

此时Rails API收到的请求数据就会自动包含added_data_from_config_axios: 'some_variable'了。

4. Rails端注意事项 #

别忘了在Rails的控制器中，把新增的字段加入Strong Parameters允许列表，否则会被Rails过滤掉：

def your_resource_params
  params.require(:your_resource).permit(:data, :added_data_from_config_axios)
end

这样整个流程就通了，所有指定类型的请求都会自动带上你需要的固定变量，不用重复编写相同代码~

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