如何在Capacitor原生应用中使用Axios发起API服务端请求

前置准备 #

• 首先在Capacitor项目根目录安装Axios依赖：npm install axios
• 依赖安装完成后同步原生配置：npx cap sync

基础通用用法（Android/iOS/模拟器均适用） #

第一步：封装统一的Axios请求实例 #

可以统一配置baseURL、超时时间、拦截逻辑，避免重复代码：

import axios from 'axios';

const apiClient = axios.create({
  // 此处的服务端地址需要根据运行场景调整，具体见后续适配说明
  baseURL: 'https://你的正式服务端地址',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器：统一添加认证token等公共参数
apiClient.interceptors.request.use(config => {
  // 这里可以替换为Capacitor Preferences插件读取存储的token
  const token = localStorage.getItem('user_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器：统一处理错误、返回体格式化
apiClient.interceptors.response.use(response => {
  return response.data;
}, error => {
  // 可在此处统一处理401无权限跳转登录、5xx服务端错误提示等逻辑
  console.error('请求出错：', error);
  return Promise.reject(error);
});

export default apiClient;

第二步：调用API示例 #

import apiClient from './你封装的实例文件路径';

// GET请求示例
const fetchUserInfo = async (userId) => {
  try {
    const result = await apiClient.get(`/user/detail/${userId}`);
    return result;
  } catch (err) {
    console.error('获取用户信息失败', err);
  }
};

// POST请求示例
const submitData = async (formData) => {
  try {
    const result = await apiClient.post('/form/submit', formData);
    return result;
  } catch (err) {
    console.error('提交失败', err);
  }
};

平台&场景适配注意事项 #

Android平台（含模拟器） #

• Android 9及以上系统默认禁止明文HTTP请求，测试阶段需要配置网络安全策略：
  1. 在android/app/src/main/res/xml目录下新建network_security_config.xml文件，内容如下：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <!-- 测试环境允许HTTP请求，生产环境建议关闭，只允许HTTPS -->
      <base-config cleartextTrafficPermitted="true" />
  </network-security-config>
  

  2. 在android/app/src/main/AndroidManifest.xml的application标签中添加属性：android:networkSecurityConfig="@xml/network_security_config"
• Android模拟器访问本地开发环境的后端服务时，不要用localhost，要使用模拟器内置的转发地址10.0.2.2，比如本地服务跑在3000端口，baseURL就填http://10.0.2.2:3000

iOS平台（含模拟器） #

• iOS默认禁止明文HTTP请求，需要在Info.plist中添加配置：
  打开ios/App/App/Info.plist，添加如下内容：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <!-- 生产环境建议只配置允许的特定域名，不要全开权限 -->
  </dict>
  

  也可以用Xcode打开项目，在Info标签的App Transport Security Settings项中，添加Allow Arbitrary Loads并设为YES。
• iOS模拟器访问本地开发服务可以直接用localhost，实体机测试需要保证手机和电脑在同一个局域网，用电脑的局域网IP作为baseURL。

常见问题排查 #

• 模拟器请求失败优先检查baseURL是否符合对应平台的规则
• 确认服务端是否配置了CORS跨域规则，Capacitor WebView的请求默认会携带Origin头，需要服务端允许对应域名的跨域请求
• 测试环境用自签名HTTPS证书的场景，需要在对应平台的网络配置中添加证书信任，生产环境建议使用正规CA颁发的证书

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