Ionic local CORS error, yet headers are set

50 views Asked by At

I am developing a Ionic app locally (on my machine) that uses XHR requests. Why do I get CORS errors?

Error :

Access to XMLHttpRequest at 'http://id:[email protected]/app/proDB.jsonp' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here the .htaccess on my server (located in /home/gwwdpcf/www/app/.htaccess) :

AuthType Basic 
AuthName "L pit blod"
AuthUserFile /home/gwwdpcf/www/app/.htpasswd
require valid-user

#   Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
#   Header add Access-Control-Allow-Origin "*"

# Enable cross domain access control
Header add Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE"
Header always set Access-Control-Allow-Headers: Authorization
Header set Access-Control-Allow-Credentials true


# Force to request 200 for options
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

Client-side code:

const url = dbUrl() {  
    return decodeURIComponent(decodeURIComponent("http://example.org/app/proDB.jsonp"))    
  }

  const username = 'id';
  const password = 'pwd';
  const credentials = username + ':' + password;
  const base64Credentials = btoa(credentials);
  var request = new XMLHttpRequest();
  request.open('GET', url, true);  
  request.setRequestHeader('Authorization', 'Basic ' + base64Credentials);
  request.setRequestHeader('Content-Type', 'application/xml');  // Assuming you're expecting XML data

  if (url === "proDB.jsonp") {
    console.log("--Asking local proDB.json...");
  } else {
    console.log("--Sending XMLHttpRequest...");
  }

  request.timeout = XHRtimeout;
  request.ontimeout = function () {    
    reject({
      status: this.status,
      statusText: request.statusText,
    });
  };
  request.onload = async function () {
    if (
      request.readyState === 4 &&
      ((request.status >= 200 && request.status <= 299) ||
        request.status === 304 ||
        request.status === 0)
    ) {   
 ...

Edit: here's what I inspect in Chrome:

enter image description here

0

There are 0 answers