#tauri-plugin #desktop-applications #tauri-app #cors #fetch #web-page #unofficial

sys tauri-plugin-cors-fetch

Enabling Cross-Origin Resource Sharing (CORS) for Fetch Requests within Tauri applications

10 stable releases

2.1.1 Mar 25, 2024
2.0.0 Mar 24, 2024
1.3.1 Mar 25, 2024

#720 in Web programming

MIT license

41KB
381 lines

tauri-plugin-cors-fetch

crates.io Documentation MIT licensed

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
  1. Initialize the plugin in your Tauri application setup:
// src-tauri/main.rs
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_cors_fetch::init())
        .run(tauri::generate_context!())
        .expect("failed to run app");
}
  1. Add permissions in your capabilities configuration:
// src-tauri/capabilities/default.json
{
  "permissions": ["cors-fetch:default"]
}
  1. Enable withGlobalTauri in your Tauri configuration:
// src-tauri/tauri.conf.json
{
  "app": {
    "withGlobalTauri": true
  }
}

Usage

After installing and initializing the plugin, you can start making fetch requests from your Tauri application without encountering CORS-related errors.

// Enable CORS for the hooked fetch globally (default is true on app start)
window.enableCORSFetch(true);

// Use the hooked fetch with CORS support
fetch("https://example.com/api")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

// Use the hooked fetch directly
window.hookedFetch("https://example.com/api");

// Use the original, unhooked fetch
window.originalFetch("https://example.com/api");

Limitation

  1. No Custom CSP Policy Support: By default, all HTTP/HTTPS requests will be redirected to local native requests.
  2. No XMLHttpRequest Support: The plugin is designed specifically to work with the modern fetch API and does not support XMLHttpRequest (XHR) requests.

License

This project is licensed under the MIT License.

Dependencies

~18–59MB
~1M SLoC