Vue Spring-boot and electron: serve is ok but not the executable file

Dear all,

I have a simple vue app that connects to the spring-boot backend. I built a desktop app using electron which runs without problem when using:

yarn electron:serve

The issue is when I build an executable file e.g.

  yarn electron:build

The executable file runs but without connecting to the backend!

After checking the dev tools, it seems the problem is related to this:

 Access to XMLHttpRequest at 'http://localhost:8081/api' from origin 'app://.' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost:8081/api/:1 Failed to load resource: net::ERR_FAILED
datareadwrite:1 Uncaught (in promise)

Any suggestion?

It seems the problem has nothing to do with electron. The vue app can not connect to the backend using localhost because of CROC, I tried different suggestions but nothing works e.g.

The problem is solved by modifying the CrossOrigin property in Spring-boot backend

In the main app file, one should add

  // Allow CROC
  @Bean
  public WebMvcConfigurer corsConfigurer() {
	return new WebMvcConfigurer() {
		@Override
		public void addCorsMappings(CorsRegistry registry) {
			registry.addMapping("/api").allowedOrigins("app://.");
  		}
  	};
   } 

Note the value of the origin should be changed e.g.

  • For the desktop app:

            @CrossOrigin("app://.")
    
  • For the web app, one must use the correct IP and port where the app is running:

             @CrossOrigin("http://127.0.0.1:8080")
    

One can also use multiple urls e.g.:

            @CrossOrigin({"app://.", "http://127.0.0.1:8080","http://localhost:8080"})
			registry.addMapping("/api/arx").allowedOrigins("app://.", "http://127.0.0.1:8080","http://localhost:8080");