# 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

**URL:** <https://forum.ionicframework.com/t/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/192777>\
**Category:** Ionic Framework\
**Created:** [July 14, 2020, 3:00pm UTC](https://forum.ionicframework.com/t/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/192777 "2020-07-14T15:00:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anton\_klochko](https://avatars.discourse-cdn.com/v4/letter/a/d78d45/32.png) [@anton\_klochko](https://forum.ionicframework.com/u/anton_klochko)\
**Post date:** [July 14, 2020, 3:00pm UTC](https://forum.ionicframework.com/t/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/192777/1 "2020-07-14T15:00:55Z")

</div>

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](https://my.com/feeds/backgrounds/bou.png)’ from origin ‘[http://localhost](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";`

```auto
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

```

```auto
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);

       
      });

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 14, 2020, 3:17pm UTC](https://forum.ionicframework.com/t/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/192777/2 "2020-07-14T15:17:07Z")

</div>

Pleases read over the CORS doc we have

> **[CORS Errors - Ionic Documentation](https://ionicframework.com/docs/troubleshooting/cors)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![anton\_klochko](https://avatars.discourse-cdn.com/v4/letter/a/d78d45/32.png) [@anton\_klochko](https://forum.ionicframework.com/u/anton_klochko)\
**Post date:** [July 14, 2020, 5:09pm UTC](https://forum.ionicframework.com/t/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/192777/3 "2020-07-14T17:09:42Z")

</div>

**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.

---

<div class="post-metadata">

**Author:** ![anton\_klochko](https://avatars.discourse-cdn.com/v4/letter/a/d78d45/32.png) [@anton\_klochko](https://forum.ionicframework.com/u/anton_klochko)\
**Post date:** [July 15, 2020, 5:36am UTC](https://forum.ionicframework.com/t/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/192777/4 "2020-07-15T05:36:03Z")

</div>

I configure a server side, add

```auto
 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 ?

---

<div class="post-metadata">

**Author:** ![anton\_klochko](https://avatars.discourse-cdn.com/v4/letter/a/d78d45/32.png) [@anton\_klochko](https://forum.ionicframework.com/u/anton_klochko)\
**Post date:** [July 15, 2020, 11:47am UTC](https://forum.ionicframework.com/t/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/192777/5 "2020-07-15T11:47:17Z")

</div>

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.

```auto
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](https://global.discourse-cdn.com/ionicframework/original/3X/7/5/75306be7c4f542c1e8bab1ea5f83a60ed279be49.jpeg)

**Add headers,**

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

---

<div class="post-metadata">

**Author:** ![chelvaric0](https://avatars.discourse-cdn.com/v4/letter/c/ed8c4c/32.png) [@chelvaric0](https://forum.ionicframework.com/u/chelvaric0)\
**Post date:** [July 15, 2020, 1:26pm UTC](https://forum.ionicframework.com/t/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/192777/6 "2020-07-15T13:26:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anton\_klochko](https://avatars.discourse-cdn.com/v4/letter/a/d78d45/32.png) [@anton\_klochko](https://forum.ionicframework.com/u/anton_klochko)\
**Post date:** [July 15, 2020, 1:42pm UTC](https://forum.ionicframework.com/t/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/192777/7 "2020-07-15T13:42:42Z")

</div>

**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](https://ionicframework.com/docs/native/http) do not fits my goals. It dose not have progression while uploading or downloading file.