Electron React生产环境读取C盘JSON文件IP配置axios实例问题

实现步骤 #

1. 准备C盘配置文件 #

在C盘根目录创建app-config.json文件，内容格式如下，后续修改IP直接改这个文件即可，无需重新打包：

{
  "apiURL": "http://你的实际API地址:端口/api"
}

2. 配置Electron预加载脚本（preload） #

Electron官方推荐通过预加载脚本向渲染进程暴露能力，避免直接开启渲染进程Node.js集成带来的安全风险。
首先编写preload脚本：

const { contextBridge } = require('electron');
const fs = require('fs/promises');
const path = require('path');

// 向渲染进程暴露读取配置的安全API
contextBridge.exposeInMainWorld('electronAPI', {
  getApiConfig: async () => {
    try {
      const configPath = path.join('C:/', 'app-config.json');
      const fileContent = await fs.readFile(configPath, 'utf-8');
      return JSON.parse(fileContent);
    } catch (err) {
      console.error('读取配置文件失败，将使用默认API地址', err);
      // 读取失败兜底逻辑，可自定义默认地址
      return { apiURL: 'http://189.173.109.69:1080/api' };
    }
  }
});

然后修改Electron主进程创建窗口的配置，关联preload脚本：

const { BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 替换为你实际的preload脚本路径
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 必须开启，保证安全
      nodeIntegration: false, // 关闭渲染进程Node集成，避免安全漏洞
    }
  });
  // 后续窗口加载逻辑不变
  mainWindow.loadURL('你的应用地址/入口文件路径');
}

3. 修改axios封装逻辑 #

因为读取本地文件是异步操作，需要把原来的同步实例导出改成异步初始化的方式：

import axios from 'axios';

const apiTest = 'http://localhost:8000/api';
let apiURL: string;
let axiosManager: any;

// 对外暴露的axios初始化方法
export const initAxios = async () => {
  if (axiosManager) return axiosManager;

  // 读取配置文件中的API地址
  const config = await window.electronAPI.getApiConfig();
  apiURL = config.apiURL;

  class AxiosInstance {
    private static instance: any;
    public manager: any;

    constructor() {
      if (AxiosInstance.instance) return AxiosInstance.instance;
      
      this.manager = axios.create({ baseURL: apiURL });
      this.manager.defaults.headers = {
        'content-type': 'application/json',
        Accept: 'application/json',
      };
      this.manager.defaults.timeout = 15000;

      // 拦截器逻辑和你原来的完全一致，不用修改
      this.manager.interceptors.request.use((request: any) =>
        AxiosInstance.requestHandler(request)
      );
      this.manager.interceptors.response.use(
        (response: any) => response,
        async (error: any) => {
          if (error?.response?.data?.error && error.response.status === 401) {
            const errorText = error?.response?.data?.error;
            console.log(errorText);
            return Promise.reject(error);
          }
          if (error?.response?.data?.error && error.response.status === 422) {
            let errorText = '';
            for (const key in error?.response?.data?.error) {
              errorText += `${error?.response?.data?.error[key]} \n`;
            }
            console.log(errorText);
          }
          return Promise.reject(error);
        }
      );

      AxiosInstance.instance = this;
    }

    static requestHandler = async (request: any) => {
      request.headers['content-type'] = 'application/json';
      return request;
    };
  }

  axiosManager = new AxiosInstance().manager;
  return axiosManager;
};

export { apiURL, apiTest };

4. 应用入口处提前初始化axios #

在React项目的入口文件（一般是main.tsx/index.tsx）中先初始化axios再挂载应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { initAxios } from './你的axios文件路径';

async function bootstrap() {
  // 先完成axios初始化再渲染应用，保证所有请求都能拿到正确的baseURL
  await initAxios();
  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
  root.render(<App />);
}

bootstrap();

注意事项 #

• 确保Electron应用对C盘的配置文件有读取权限，不要将配置文件放在需要管理员权限才能访问的目录
• 打包应用时注意preload脚本的路径配置，避免打包后找不到preload文件
• 若需要支持热更新配置，可增加文件监听逻辑，修改配置文件后自动更新axios的baseURL

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