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:
