Arnab Chakraborty 58e7151e19 Move Auth Tokens storage from Local Storage to custom encrypted .sdks file (#2831)
* Initial encryption functions

* Storage of encrypted tokens & working login

* Add customized `tauri-plugin-cors-fetch`

We need to have it in our crates folder due to the dependency of `sd-crypto` for the handling of cookies.

* Lint
2024-12-14 19:49:50 -05:00

3.2 KiB

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.