No 'Access-Control-Allow-Origin' error on for origin 'file://'

[mattotodd]

What is the recommended way to make a web request?
When I try to make a web request using npm fetch I get the following error

Fetch API cannot load https://foobar.com/YadaYada. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access.

I have also set the following as my browser-window options, but it has not resolved the issue.

'web-preferences': {
  'web-security': false
}

Does this mean I can not make API requests to different servers? Since all of my javascript code is going to be run on a local file:// path ?

[zcbenz]

You can use fetch with “no-cors” mode, see also:
https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

[kidwm]

@zcbenz this is my fetch code

fetch(api + 'oauth/token', {
    mode: 'no-cors',
    method: 'post',
    body: form
}).then((response) => response.json()).then(function(data) {
        console.log(data.access_token);
});

after use 'no-cors' mode, it will cause an error in response.json():

Uncaught (in promise) SyntaxError: Unexpected end of input

although I can see the json response in Devtools Network Panel, response.text() will be empty in this case.

[zcbenz]

This error means response is not a valid JSON string.

[kidwm]

@zcbenz yes, but it is a valid json instead of empty string when I ran this app without no-cors in localhost:3000 which is allowed in 'Access-Control-Allow-Origin' header of my api server.

Since I set

'web-preferences': {
        'web-security': false
    }

in main.js, I expect that fetch should work with file:// protocol, or did I get something wrong?

[zcbenz]

@kidwm The response headers have to explicit set the file's type to JSON to allow the .json(), and apparently the url with file:// doesn't have any header so the call is not allowed. You have to manually call JSON.parse, or you can create an issue in Chromium project on this.

[kidwm]

@zcbenz There is no content in Response with no-cors. So JSON.parse will fail.
I just wonder why 'web-security': false does not work with window.fetch.

Now I turn into using superagent instead of native window.fetch.

[hbrls]

@kidwm Can you share your superagent code for it?

[hbrls]

As long as I've tried, the config should be:

webPreferences: {
    webSecurity: false
}

And then you don't have to use fetch (url, { mode: 'no-cors' }).

It works as if a native app.

[NdYAG]

The problem here, is that, in cases like OAuth2, you don't have rights to add Access-Control-Allow-Origin header onto the response.

And even with loadURL('file://${__dirname}/index.html'), {webSecurity: false} and fetch(url, {mode: 'no-cors'}), the response is still opaque response in renderer process and could not be accessed (while the request display the full valid json response in devtools).

This is really counterintuitive as electron is a native application, but it's right now difficult to make no-cors requests.

[erguotou520]

hbrls's answer works.

[tetsuo-matsumura]

@zcbenz yes, but it is a valid json instead of empty string when I ran this app without no-cors in localhost:3000 which is allowed in 'Access-Control-Allow-Origin' header of my api server.

Since I set

'web-preferences': {
        'web-security': false
    }

in main.js, I expect that fetch should work with file:// protocol, or did I get something wrong?

Worked for me using electron-vue. Had to pass the web-preferences into the createWindow options.

[tuan072090]

Just overide header before send request like this

const filter = { urls: ['*://*.google.com/*'] }; const session = electron.remote.session session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => { details.requestHeaders['Origin'] = null; details.headers['Origin'] = null; callback({ requestHeaders: details.requestHeaders }) });

put these codes in renderer process

[camdagr8]

@tuan072090 Thanks Hero!

[Nashorn]

Just overide header before send request like this

const filter = { urls: ['*://*.google.com/*'] }; const session = electron.remote.session session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => { details.requestHeaders['Origin'] = null; details.headers['Origin'] = null; callback({ requestHeaders: details.requestHeaders }) });

put these codes in renderer process
const filter = { urls: ['://.google.com/*'] }; const session = electron.remote.session session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => { details.requestHeaders['Origin'] = null; details.headers['Origin'] = null; callback({ requestHeaders: details.requestHeaders }) });

Is the working solution