Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using electron to access cross-origin-resources

I have a list on sharepoint where I am tracking tasks.

I am trying to create an electron app that will ping (http get request) this list every minute or so and display a little window with all the tasks the current user has assigned and highlight new tasks.

I am using the fetch API to access the list as follows:

const _COLLAB_ROOT = "http://company.com/projects/team-site/_vti_bin/listdata.svc/"

export function read(list, callback) {
    const myHeaders = new Headers({
        "Accept": "application/json",
        'Authorization': 'Basic '+btoa('username:password'),
        'Access-Control-Allow-Origin': '*'
    });
    const myInit = {
        method: 'GET',
        headers: myHeaders,
        mode: 'no-cors'
    }
    fetch(_COLLAB_ROOT+list,myInit)
        .then(response => {
            if (response.ok) {
                response.json().then(data => {
                    callback(data.d);
                });
            }
            return Promise.reject(Error('error'))
        }).catch(error => {
            return Promise.reject(Error(error.message))
        })
}

Other module:

read('listname',data => {
  console.log(data);
})

However when I send this request with a list name filled in, I get the following: enter image description here enter image description here

Now I assume this has something to do with CORS. What I would like to know is, is there a way to get this working?

It seems like something very obvious to be required in electron.

Also I have set the we-preferences property to

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: true,
    'web-preferences': {'web-security': false}
  });

Any help is appreciated here. I will be really surprised if this is not possible so hopefully I am being dumb!

Edit: Response when querying from Restlet client on chromeenter image description here

like image 838
Martin O Leary Avatar asked May 26 '17 16:05

Martin O Leary


People also ask

Does electron use CORS?

Instead, you can use the Node server running your Electron app to send the requests for you. This bypasses CORS because it is a server-to-server request. It doesn't expose your app to any security vulnerabilities. Best of all it comes ready to use with no config changes and only takes a few lines of code to implement.

How is CORS cross-origin resource sharing possible?

CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

How do I accept cross-origin requests?

In Java servlets. Simply add a header to your HttpServletResponse by calling addHeader : response. addHeader("Access-Control-Allow-Origin", "*");

How does Access-Control allow origin work?

Access-Control-Allow-Origin is a CORS (cross-origin resource sharing) header. When Site A tries to fetch content from Site B, Site B can send an Access-Control-Allow-Origin response header to tell the browser that the content of this page is accessible to certain origins.


1 Answers

You're using the old webPreferences syntax, your constructor should look something this :)

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: true,
    webPreferences: {
        webSecurity: false
    }
});
like image 125
MarshallOfSound Avatar answered Sep 18 '22 15:09

MarshallOfSound