Ajax's headers not being sent (via electron webview)

Question

I have tried the solutions that I found here for the headers issue, e.g. beforeSend and checking the version of ajax. I basically have an electron app, inside, there's a webview, this webview communicates with an ipc script, this ipc script adds jquery to the visited page, then it executes an ajax request. I'm using Vue for the front-end.

The problem is, it's not sending the custom requests that I'm putting. Although, It was working 100% before. I really don't remember what caused it.

The main index.js of my electron app

mainWindow = new BrowserWindow({
height: 850,
useContentSize: true,
width: 1550,
webPreferences: {

  webSecurity: false,
  nodeIntegration: true,
  webviewTag: true
}
})

The webview

<webview :id="webview.key" :src="webview.url" :preload="fullpath + `\\serverBrowserIPC.js`" style="height: 100%" pcontextIsolation></webview>

the ipc.js file

 const {
   ipcRenderer
 } = require('electron');
 const _ = require("lodash")
 const myajaxfile = require("./myajaxfile.js")

 window.onload = function() {
   var script = document.createElement("script");
   script.src = "https://code.jquery.com/jquery-3.5.1.min.js";
   script.onload = script.onreadystatechange = function() {
   };
   document.body.appendChild(script);

   // var script2 = document.createElement("script");
   // script2.src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js";
   // script2.onload = script2.onreadystatechange = function() {
   // };
   // document.body.appendChild(script2);
 };

 ipcRenderer.on("get_item", function(event, payload) {
   myajaxfile.sendRequest()
 });

the myajaxfile.js ajax part (basic template):

    let stream_ajax = $.ajax({
    method: "GET",
    url: `https://example.com/ajaxCenter?_action=getserver}`,
    headers: {
      "Access-Control-Allow-Origin": "true",
      'accept': '*/*',
      'X-Requested-With': 'XMLHttpRequest',
      'x-csrf-token': csrf_token
    },
    complete(response, status) {
      if (status === "success") {
        
      } else {
        
      }
    }
  });

Nothing of the headers is being sent. Before, it was working 100% well without any issues. Any help is really appreciated, this issue is halting my whole project.

I have uploaded a sample of the project, which could be downloaded here. install the packages with npm install and then npm run watch to run the electron app. After running it, please click on the button connect and check the network tab in the console.

The provided request in the project works only if the csrf-token was sent in the headers, otherwise, it would cause a redirect. Previously, it used to work without any issues.

Answer 1

Since you're sending custom headers this is governed by CORS and will happen in two steps. It's best illustrated in another StackOverflow answer here.

The biggest issue I see is that you're trying to send the server Access-Control-Allow-Origin when that is a header that should be coming from the server in the response. I'd double check that the server you're connecting to is configured for CORS. You can also try logging your error messages. The jqxhr returned by $.ajax has quite a few ways to get at the status text. It should help narrow down exactly where your call is failing.

Answer 2

Really strange, that is the way to send headers in ajax calls through jquery.

Are you really sure about your issue? If yes, the problem probably is somewhere else, not in the reported code.

Once said that, you could remove two of your custom headers: X-Requested-With it is sent by default with value XMLHttpRequest by jquery and Access-Control-Allow-Origin as the protocol expects to find it in server response (not in client request).

Answer 3

There is nothing wrong in your client-side(electron), The CORS (Cross-Origin Resource Sharing) needs to be configured on your server-side. The Access-Control-Allow-Origin header is supposed to be sent by the server, not the client(Your Ajax Call.). You have to have CORS configured in your server to enable the cross-origin request otherwise clients like Axios, jquery ajax won't work. Ask your server admin or application developer for it. Here is ho it's work

when the server responds with Access-Control-Allow-Origin: *, which means that the resource can be accessed by any domain. YOu can also go for Preflight Request approach, by sending the HTTP OPTIONS method to the server before calling the actual endpoint. Here is the MDN docs for your reference.