I'm using Ionic v6.11.8 and created an App using Angular, The app is working fine on browser, But when I build a debug app from it im getting Http failure response for (unknown url): 0 Unknown Error for "few" endpoints.

I mean, I have around 5-6 API calls, most of them are working fine, for few, I'm getting error. I'm using WordPress on server and created API using WordPress RESTful API and All of the API endpoints are working fine on browser. I'm using Angular HttpClient to make HTTP calls.

My Checklist:

  1. Cors are enabled : I refered to THIS article and enabled the Cors from server side.

header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE' );
header( 'Access-Control-Allow-Headers: Origin,X-Requested-With,Accept,Accept-Language,Content-Language,Content-Type');
header('Access-Control-Expose-Headers: X-Requested-With,Content-Length,Content-Range' );

  1. SSL installed : I've installed SSL to the website using SSLForFree (temporary, for testing purpose)

  2. Added src/xml/network_security_config.xml on Android project (And tried few things from THIS question)

 <base-config cleartextTrafficPermitted="true">
     <trust-anchors>
         <certificates src="system" />
         <domain includeSubdomains="true">my-website.com</domain>
     </trust-anchors>
 </base-config>  </network-security-config>
  1. Enabled android:usesCleartextTraffic="true" on Manifest file.

  2. Added header on request

this.base_url = "https://my-website.com/wp-json/rak/v1";

getHeaders(){
let headerOption = new HttpHeaders ();
headerOption.append('Content-Type', 'application/json');
headerOption.append('X-Requested-With', 'XMLHttpRequest');
return headerOption;
}

getInstaPosts(){
return this.http.get(this.base_url+'/getdata', {headers: this.getHeaders()});
}

Still im not able to get the error sorted. I saw my Android console, I got this below error there.

E/Capacitor/Console: File: http://localhost/landing - Line 0 - Msg: Access to XMLHttpRequest at 'https://my-website.com/wp-json/rr/v1/getdata' from origin 'http://localhost' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100' that is not equal to the supplied origin.

But this issue is not happening with all API endpoints, Most of the endpoints are working fine. Only 1-2 Endpoints happening like this, I thought there must be any error from server side, but no. there are no errors.

Tried googling the issue and tried many solutions from the results, but nothing worked till now. Even I switched t @ionic-native/http/ngx module, then I cant test the app on browser.

This issue happening with android platform.

Help me with the issue. I want fine any clear issue/solution on the web till now for this error.

0

There are 0 best solutions below