Ionic : http request work on server and not on virtual device

Question

I have an application developed in ionci, and a server application spring where my services are deployed.

Call my services work in the browser, but not via the emulator.

CODE on the server

 @SpringBootApplication
 @EnableWebMvc
 public class SpringBootWebApplication extends WebMvcConfigurerAdapter{
     public static void main(String[] args) {
         SpringApplication.run(SpringBootWebApplication.class, args);
     }

     @Override
     public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                 .allowedMethods("GET", "POST");
     }
 }

My controller

  @RestController
  @CrossOrigin(origins = "*")
  @RequestMapping("/api")
  public class WordController {
     private WordService wordService;

     @Autowired
     public void setWordService(WordService wordService) {
         this.wordService = wordService;
     }

     @GetMapping("/list-words-by-letter")
     @CrossOrigin(origins = "*")
     public Iterable<Word> getWordsBytLetter(String letter) {
          return wordService.listAllWordsByLetter(letter);
     }
 }

Front Code index.html

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
   <title>Ionic App</title>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, 
 initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">

   <meta http-equiv="Content-Security-Policy" content="default-src *;  img- 
 src * 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 
 'self' 'unsafe-inline' 'unsafe-eval'">

My Service

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpHeaders} from ' 
@angular/common/http';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { _throw } from 'rxjs/observable/throw';
 @Injectable()
 export class DictionnaryService {
   public API = 'http://127.0.0.1:8080';

   constructor(public http: HttpClient) {
   }

   getAllWordsByLetter(letter: string): Observable<any> {
     console.log('in getAllWordsByLetter methode service ')
     let url = this.API + '/api/list-words-by-letter?letter='+letter;

   let headers = new HttpHeaders().set("X-CustomHeader", "custom header 
 value")
   .append('Content-Type', 'application/fhir+json')
   .append("'Access-Control-Allow-Origin", "*")
   .append("Accept", "application/fhir+json");
     return this.http.get(url, { headers }).pipe(   
 catchError(this.handleError));
   }

   private handleError(error: HttpErrorResponse) {    
        console.log(    
         `Backend returned code ${error.status}, ` +
         `body was: ${error.error}, ` + `error message : ${error.message}, 
 `);
     return _throw(error.message);
   };
 }

The log display :

07-06 12:07:20.160 25882-25882/io.ionic.starter I/chromium: [INFO:CONSOLE(208)] ****"Backend returned code 0, body was: [object ProgressEvent], error message : Http failure response for (unknown url): 0 Unknown Error, "****, source: file:///android_asset/www/build/main.js (208) 07-06 12:07:20.454 25882-25882/io.ionic.starter W/art: Attempt to remove non-JNI local reference, dumping thread

I thought it was a cors problem. But I don't know anymore.
If someone have an idea?

Thanks in advance.

There’s nothing in that error message to indicate it’s a CORS issue — sideshowbarker, Jul 06 '18 at 14:29

score 0 · Answer 1 · answered Jul 06 '18 at 16:39

I'm not sure about the issue you have but one thing I know for sure is that you should add the configuration for Access-Control-Allow-Origin on the server side not the client.

so remove .append("'Access-Control-Allow-Origin", "*") from your service and try to find the way of adding it in spring framework code possibly in the registry of addCorsMappings method of your code as registry.addMapping("/**") .allowedMethods("GET", "POST") .allowedOrigins("*");

score 0 · Answer 2 · answered Jul 10 '18 at 07:18

It's a problem of access between the virtual device and my localhost.

Reading this topic : How can I access my localhost from my Android device?

I change the url of the api:

   public API = 'http://127.0.0.1:8080';   =>   public API = 'http://10.0.2.2:8080';

There is certainly a better solution. like use proxy I think in function of the environment.

Ionic : http request work on server and not on virtual device

2 Answers2