Solve the failure of electron + react single page application to call localhost service

problem causes:

I used electron for the first time, and after using node locally to start the background service, it was packaged into an exe program and installed successfully, but the http://localhost:8080/apiinterface could not be adjusted. I tried again http://127.0.0.1:8080/api, and the problem was still not resolved.

After checking, it is found that there is no problem with the code. After thinking about it again and again, I think it is still related to domain name restrictions or port restrictions. Then it is probably confirmed that it is restricted by the same-origin policy. After consulting the documentation, it is found that the webSecuritysame-origin policy restriction can be turned off through configuration properties.

Then, problem solved.

import { app, BrowserWindow } from 'electron'

mainWindow = new BrowserWindow({
 	 webPreferences: { webSecurity: false }
})

Electron Official Documentation - browserwindowoptions

think:

As we all know, the architecture of electron is:

electron = chromium + nodejs + native API

I thought about it, if you use nodejsor native netto send network requests, you can perfectly avoid cross-domain problems.

However, since I am using reactthe framework of , integrate electronthe solution, and use the interface call umi-request, the request is essentially sent through the chromium medium, which is restricted by the same-origin policy. Here's the problem!

Summarize:

These two ways of sending requests are not affected by the same-origin policy of the browser.

  • Send network requests through nodejs
  • Send network requests through electron's net module

Guess you like

Origin blog.csdn.net/haoaiqian/article/details/128063395