CORS errors when loading assets

[nullchinchilla]

Is there any way to disable CORS in the webview?

To avoid an X-Y problem: I am loading local JS/HTML files with a custom protocol wry://. These JS files then talk to a backend service that I control.

The problem is, neither setting Access-Control-Allow-Origin: * nor Access-Control-Allow-Origin: wry:// work on the server, because it seems like the webview hardcodes https and http URL as the only kind of CORS origin. Can CORS just be turned off completely?

Or is there a way of loading local JS/HTML files with a host that can be matched against by Access-Control-Allow-Origin?

[wusyong]

If we just talking about CORS, I think it won't be possible.
Because platform like macOS doesn't support disabling it.
If you just want to load files from a host server, I suppose just load the URL with http://localhost should work.

[nullchinchilla]

I see. The files are in the filesystem, so I'd have to hack together a localhost listener to serve them...

[wusyong]

Custom protocol is usually used for loading assets within a certain data directory.
It's also possible to do something like file://.
If you can all load them with it, I don't think you need a backend server.
But this is the first time, I encounter CORS issue in wry. Perhaps @lucasfernog and @lemarier could also give some advice?

[nullchinchilla]

This whole issue is because CORS doesn't support custom protocols.

[lemarier]

In macOS there is a private API, but not sure it's something we want to include.

https://trac.webkit.org/browser/trunk/Source/WebKit/mac/WebView/WebPreferences.mm?rev=111350#L1011

[lemarier]

Looks like IONIC had to boot a local HTTP server :/

https://docs.google.com/document/d/19VQ-n7hGr9IDPPstQqU8_8WgqUh7R6sgQfL2neoT-Xw/edit

[wusyong]

@nullchinchilla We would like to look into this issue. Maybe it's only affected on certain platform. (Windows for example)
Could you share your server setup and minimum example with wry?
Anyone with similar problem is welcome to share the mcve.

[raguay]

Here is a minimal test case: https://github.com/raguay/TestIt

This example shows the problem I'm having with CORS. A similar situation works for NW.js and Electron on the Mac.

[raguay]

BTW: I'm on a macpro M1 system with the latest Big Sur OS.

[nothingismagick]

Well, my opinion here is that CORS exists in browsers to prevent unauthorised access. If you are using something like window.fetch, I would expect it not to work if your service requires it (e.g. using helmet within some kind of express server). My recommendation is to use tauri's http API - which is not bound by the same limitations of CORS in a browser-like environment.

[nothingismagick]

just use the http api from tauri here:

import { fetch } from "@tauri-apps/api/http" 
// or `withGlobalTauri: true` in tauri.conf.json
const { fetch } = window.__TAURI__.http;

function getMessage() {
	fetch("http://localhost:9878/api/", {
		method: "get",
		headers: { "Content-type": "application/json" }
	}).then(data => {
		return data.text();
	}).then(data => {
		console.log(data);
	});
}

[raguay]

Okay, that does work. I didn't know about that API. I guess I need to study the API more. Thanks for the pointer.

[wusyong]

Closing this with the solution above. Note that CORS can still be solved by backend servers handle it properly.
We should add documents about this on the HTTP endpoint API.