HTTP GET リクエストを送る（Rust経由）

Tauri アプリケーションから外部サーバーへ HTTP GET リクエストを送信する方法を解説します。
Tauri では @tauri-apps/plugin-http を使用することで、Rust バックエンドを経由してリクエストを行うことができます。これにより、ブラウザ標準の fetch で問題となる CORS (Cross-Origin Resource Sharing) 制約を回避 して、任意の API にアクセスすることが可能になります。

前提条件

この機能を使用するには、@tauri-apps/plugin-http プラグインが必要です。

1. プラグインのインストール

npm run tauri add http

2. Permissions (権限) の設定

src-tauri/capabilities/default.json に http:default 権限を追加します。
Tauri v2 ではセキュリティの観点から allow: [{ "url": "*" }] のような無制限なワイルドカード指定は許可されていない場合があるため、使用する API のドメインを明示的に指定する必要があります。

以下の例では、コード例で使用する jsonplaceholder.typicode.com と api.example.com を許可しています。

{
  "permissions": [
    {
      "identifier": "http:default",
      "allow": [
        { "url": "https://jsonplaceholder.typicode.com/*" },
        { "url": "https://api.example.com/*" }
      ],
      "deny": []
    }
  ]
}

注意: 開発中は便利だからと広範囲な許可をしたくなりますが、本番ビルドでは実際に使用するドメインのみを許可することが強く推奨されます。

使用方法

@tauri-apps/plugin-http の fetch 関数は、Web 標準の Fetch API と互換性があります。
そのため、フロントエンド開発者にとって馴染みのある方法で使用できます。

import { fetch } from '@tauri-apps/plugin-http';

// 基本的な使用法
const response = await fetch('https://api.example.com/data');

コード例

例1: JSON データを取得する

API から JSON データを取得して表示する基本的な例です。

import { fetch } from '@tauri-apps/plugin-http';

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

async function getUsers(): Promise<User[] | undefined> {
    try {
        // Rust経由でリクエストが送信されます
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json() as User[];
        console.log('Users:', data);
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        return undefined;
    }
}

例2: クエリパラメータとヘッダーを指定する

検索クエリを含めたり、認証トークンなどのカスタムヘッダーを設定する例です。

import { fetch } from '@tauri-apps/plugin-http';

async function searchItems(query: string, apiKey: string): Promise<any> {
    const url = new URL('https://api.example.com/search');
    url.searchParams.append('q', query);
    url.searchParams.append('limit', '10');

    try {
        const response = await fetch(url.toString(), {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Accept': 'application/json',
                'User-Agent': 'Tauri-App/1.0'
            },
            // タイムアウト等の設定も可能（プラグインの仕様による）
        });

        if (response.ok) {
            const result = await response.json();
            return result;
        }
    } catch (err) {
        console.error(err);
    }
}

例3: バイナリデータ（画像など）を取得する

画像などを Blob や ArrayBuffer として取得する場合も標準 API と同様です。

import { fetch } from '@tauri-apps/plugin-http';

async function downloadImage(imageUrl: string): Promise<string> {
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    
    // Blob URLを作成してimgタグなどで表示可能にする
    const objectUrl = URL.createObjectURL(blob);
    return objectUrl;
}