Как в приложении Vue.js + Capacitor сделать нативный сетевой запрос

Обычные fetch запросы в коде Vue будут работать внутри WebView. Иногда такое решение может не устраивать, и нам нужны прямые запросы с устройства, например, чтобы избежать проблем с CORS при запросах. Для отправки запросов с устройства существует специальный плагин Capacitor HTTP.

Чтобы установить плагин нужно выполнить команду:

npm install @capacitor-community/http

Затем в компоненте Vue нужно импортировать модуль плагина:

import { Http } from '@capacitor-community/http';

Теперь можно писать запросы, которые будут через этот плагин. например, GET запрос с заголовками:

try {
  const options = {
    url: 'https://url/getInfo.php',
    headers: {
      'API-KEY': 'Api-Key-Here',
      'Content-Type': 'application/json'
    },
    data: {},
    params: {}
  };

  const response = await Http.get(options);

  try {
    const resData = response.data
    console.log('Data from API:', resData);
  } catch {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

} catch (error: any) {
  console.warn('Failed to fetch data from API:', error);
}

или POST запрос с входными данными:

try {
    const options = {
      url: import.meta.env.VITE_API_BASE_URL + '/getRequiredInfo.php',
      headers: {
        'x-api-key': import.meta.env.VITE_API_KEY,
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + jwtToken
      },
      data: {
        userId: getUserId.value,
      },
      params: {}
    };

    const response = await Http.post(options);

    if (response.status >= 200 && response.status < 300) {
        console.log('Успех:', resData)
    } else {
      console.warn('Ошибка API:', response.status, response.data)
    }

} catch (error: any) {
    console.error('Сетевая ошибка:', error)
} finally {
    console.log('start finally')
}

Перед запуском приложения на устройстве убедитесь, что установлены разрешения на работу с сетью в файле AndroidManifest для Android:

<uses-permission android:name="android.permission.INTERNET" />

Хотя он должен добавиться автоматически, иногда этого не происходит и нужно сделать это вручную.

Для iOS в Info.plist ничего добавлять не нужно так как Apple разрешает по умолчанию сетевые запросы.

Однако по умолчанию устройства работают только с https запросами. Если вам нужен http то для этого нужно добавить в Info.plist для iOS:

NSAppTransportSecurity

  NSAllowsArbitraryLoads
  

и в AndroidManifest для Android:

<application
  ...
  android:usesCleartextTraffic="true">

Должно все работать. Если нашли ошибку или есть чем дополнить напишите в комментах.