Ionic 5. Access to XMLHttpRequest from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Ionic Framework
1

Hi all ! Could anyone suggest please … is it possible to get it work with HttpClient on Android/iOs on real device ? I spend all day and did not find decision.

I configure a server side, add Access-Control-Allow-Origin: * and Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS but is did not help.

I have an error - Access to XMLHttpRequest at ‘https://my.com/feeds/backgrounds/bou.png’ from origin ‘http://localhost’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I use.

import {HttpClient, HttpErrorResponse, HttpRequest, HttpResponse} from "@angular/common/http";

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.10
   @angular-devkit/schematics    : 8.3.10
   @angular/cli                  : 8.3.10
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 23 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (C:\Users\anton\AppData\Local\Android\Sdk)
   NodeJS            : v12.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

cordova.cmd plugin ls

com-sarriaroman-photoviewer 1.2.4 "PhotoViewer"
cordova-clipboard 1.3.0 "Clipboard"
cordova-plugin-advanced-http 2.1.1 "Advanced HTTP plugin"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-background-mode 0.7.3 "BackgroundMode"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-opener2 3.0.0 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-inappbrowser 3.1.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-ms-adal 0.10.1 "ADAL for Cordova"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-printer 0.8.0 "Printer"
cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-vibration 3.1.1 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
cordova-sqlite-storage 3.2.1 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova.plugins.diagnostic 5.0.0 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"

 let options = {chunkedMode: false, responseType: 'arraybuffer'};
  const req = new HttpRequest('GET', mediaObj.bu_link, options);

  this.httpClient.request(req).retry(2).subscribe(event => {
        if (event instanceof HttpResponse) {

        let file = new Blob([event.body as BlobPart], {type: 'image/png'});

        }
      }
      ,
      (err: HttpErrorResponse) => {
        this.logProvider.writeLog("ERROR: method saveBgImage  in AddMediaProvider class ", err);

       
      });
2

Pleases read over the CORS doc we have

3

mhartington, good day. Thank you very much. Could you give an example please what I need to do for WebView 3.x plugin on Cordova if I use HttpClient` in Angular and have access to server. I am not fully understand doc.

4

I configure a server side, add

 Access-Control-Allow-Origin: * 
 Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS

But it dose not help. What I did wrong? maybe I need to add headers at frontend ?

5

Could anyone explain please how I need to configue backend and frontent properly. It can not work for me and I can not google any decisions.

let options = {chunkedMode: false, responseType: 'arraybuffer'};
  const req = new HttpRequest('GET', mediaObj.bu_link, options);

  this.httpClient.request(req).retry(2).subscribe(event => {
        if (event instanceof HttpResponse) {

        let file = new Blob([event.body as BlobPart], {type: 'image/png'});

        }
      }
      ,
      (err: HttpErrorResponse) => {
        this.logProvider.writeLog("ERROR: method saveBgImage  in AddMediaProvider class ", err);

       
      });

Headers from server.

header
header1506×577 117 KB

Add headers,

header(“Access-Control-Allow-Origin: *”);
header(“Access-Control-Expose-Headers: access-control-allow-origin”);

6

the access allow headers need to be added in the options response. your application will first send an options request to your back end to see what methods he is allowed to use

7

chelvaric0, good day! could you share small example please what I need to do on server side and fronend. I can not find decision second day.

Unfortunately https://ionicframework.com/docs/native/http do not fits my goals. It dose not have progression while uploading or downloading file.