Ionic / Angular App http requests fail to connect to Spring REST API using an Android emulator / real Android device when targeting the host ip

Question

I am unable to perform any http requests from my Ionic App to my Spring API when I am targeting the actual host adress (192.168...). Using the localhost in my Chrome Browser works fine, aswell as using the Android emulator gateway (10.0.2.2) in my virtual device. However, as soon as i use my host ip, only the Chrome Browser is able to send requests. I also made sure that my real device is in the same network as my host and it actually is able to reach the Spring API through its Browser. Unfortunately, if I then try to send a http request in the App, I get a really vacuous error message:

{
   "headers":{
      "normalizedNames":{},
      "lazyUpdate":null,
      "headers":{}
   },
   "status":0,
   "statusText":"Unknown Error",
   "url":"http://hostip:8080/authentication",
   "ok":false,
   "name":"HttpErrorResponse",
   "message":"Http failure response for http://hostip:8080/authentication: 0 Unknown Error",
   "error":{
      "isTrusted":true
   }
}

This is what my login method looks like:

  login(email: string, password: string) {

    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Basic ' + base64string
      }),
      observe: 'response' as 'body',
      withCredentials: true
    };
    return this.http.get(
      'http://hostip:8080/authentication', httpOptions
    );
  }

At any other point in my App I am just calling the http.get method with the url and withCredentials: true as an argument. I also made sure that these lines are included in my config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

I also added a CORS Filter to my Spring API since I am sending an authorization header and want to set Access-Control-Allow-Origin: * but combining these two things is forbidden by CORS-policy which is why my filter takes the request´s origin and returns it in the Access-Control-Allow-Origin-Header. Therefore every origin is allowed without using the wildcard *.

@Component
public class SimpleCORSFilter implements Filter {

    public SimpleCORSFilter() {}

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}

    @Order(Ordered.HIGHEST_PRECEDENCE)
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        System.out.println("Origin: " + request.getHeader("Origin"));

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Authorization, Origin, Content-Type, Version");
        response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization, Origin, Content-Type");

        chain.doFilter(req, res);
    }
}

My Spring Security Config is as simple as this:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http
            .csrf().disable()
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS).permitAll()
            .antMatchers(HttpMethod.GET).permitAll()
            .antMatchers("/logout").permitAll()
            .anyRequest().hasAnyRole("USER")
        .and()
            .httpBasic()
        .and()
            .logout();
    }
}

I really appreciate all the help i can get and I am looking forward for your answers.

Also Check this: https://stackoverflow.com/a/59310320/5909026 — Najam Us Saqib, Feb 13 '20 at 14:20
I checked on Android 8 and 10. And wow, that solved it! I was looking for hours and couldn´t find the solution. You really saved my day :-) Feel free to write an answer so i can mark it as the solution if you want. — nik, Feb 13 '20 at 14:44

score 1 · Accepted Answer · answered Feb 13 '20 at 14:56

Android changed its http architecture from version 9.

to make it working on Android go to your project root folder.

yourAppFolder > resources > android > xml > network_security_config.xml

Change your network security config to blow code.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Ionic / Angular App http requests fail to connect to Spring REST API using an Android emulator / real Android device when targeting the host ip

1 Answers1

Linked