tauri-plugin-cors-fetch

An unofficial Tauri plugin that enables seamless cross-origin resource sharing (CORS) for web fetch requests within Tauri applications.

Overview

When building cross-platform desktop applications with Tauri, we often need to access services like OpenAI that are restricted by Cross-Origin Resource Sharing (CORS) policies in web environments.

However, on the desktop, we can bypass CORS and access these services directly. While the official tauri-plugin-http can bypass CORS, it requires modifying your network requests and might not be compatible with third-party dependencies that rely on the standard fetch API.

How it Works

This plugin extends the official tauri-plugin-http by hooking into the browser's native fetch method during webpage initialization. It transparently redirects requests to the tauri-plugin-http, allowing you to use the standard fetch API without additional code changes or workarounds.

Installation

1. Add the plugin to your Tauri project's dependencies:

# src-tauri
cargo add tauri-plugin-cors-fetch

2. Initialize the plugin in your Tauri application setup:

// src-tauri/src/lib.rs
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_cors_fetch::init())
        .run(tauri::generate_context!())
        .expect("failed to run app");
}

3. Add permissions in your capabilities configuration:

// src-tauri/capabilities/default.json
{
  "permissions": ["cors-fetch:default"]
}

4. Enable withGlobalTauri in your Tauri configuration:

// src-tauri/tauri.conf.json
{
  "app": {
    "withGlobalTauri": true
  }
}

Usage

Once installed, the plugin automatically hooks into the browser's fetch API. You can use fetch normally without any code changes:

// Standard fetch - now works with CORS
fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data));

Configuration (Optional)

Configure which requests should bypass CORS and set default request parameters:

window.CORSFetch.config({
  include: [/^https?:\/\//i], // Process all HTTP requests (default)
  exclude: ["https://api.openai.com/v1/chat/completions"], // Skip CORS bypass
  // Default request parameters (applied to all CORS requests)
  // see https://v2.tauri.app/reference/javascript/http/#clientoptions
  request: {
    maxRedirections: 5, // Default maximum redirections
    connectTimeout: 30 * 1000, // Default connection timeout (ms)
    proxy: {
      all: "http://127.0.0.1:7890", // Default proxy for all requests
    },
  },
});

Configuration Options:

• include: Array of URL patterns (strings or RegExp) that should use CORS bypass

• exclude: Array of URL patterns that should NOT use CORS bypass

• request: Default request parameters (applied to all CORS requests) object containing:

  • connectTimeout: Default connection timeout (ms)
  • maxRedirections: Default maximum redirections to follow
  • proxy: Default proxy configuration for all requests (see Tauri HTTP proxy docs)

These default request parameters will be used for all CORS requests unless overridden in individual fetch calls.

Alternative Methods

// Direct CORS-enabled fetch
window.fetchCORS("https://api.example.com/data");

// Original native fetch (with CORS restrictions)
window.fetchNative("https://api.example.com/data");

Limitations

• Streaming: Server-Sent Events (SSE) and streaming responses are not supported. See implementation details.
• XHR: Only supports the modern fetch API, not XMLHttpRequest.

License

MIT License © 2024-PRESENT Del Wang