Ionic4 Cordova Web Api Calling Angular HttpClient With Production Problem (Solved)

Ionic Framework
1

Hi Everone,

My project is correctly run on “Ionic serve -l” command. (Proxy on active)

but “ionic cordova run browser --prod or ionic cordova run android --prod” command not working. Because proxy mode not working production mode. (I’ve tried Apk Generated and device mode)

I am send Post Method, but angular send Options method.

This scope only my send header when

 return this.http.post(this.api.base + this.api._getToken, "grant_type=password&username=" + username + "&password=" + password, {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            })
        });

if I not append headers then success work on post. But My needed Custom Headers.

OPTIONS https://localhost:44373/getToken  
Access to XMLHttpRequest at 'https://localhost:44373/getToken' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

image

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (C:\Users\*\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.3, (and 9 other plugins)

System:

   Android SDK Tools : 25.2.3 (c:\Users\*\AppData\Local\Android\Sdk)
   NodeJS            : v10.14.2 (C:\Program Files\nodejs\node.exe)
   npm               : 4.6.1
   OS                : Windows 10

package.json

  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29",
    "cordova-android": "~7.1.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.2.0",
    "@ionic/lab": "1.0.19",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-x-toast": {},
      "cordova-plugin-native-spinner": {}
    },
    "platforms": [
      "android"
    ]
  }

index.html

 <meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

config.xml


 <content src="index.html" />
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
2

The error is because your server is not configured correctly. Please take a look at the MDN doc to research CORs a bit more.

1 Like
4

My Problem is Asp.net Web Api Cors. I Add referance Microsoft. Owin.Cors and Startup.cs Append useCors All bug fixed.

image

1 Like
5

what are you doing to solve this?

Thanks!

6

I reconfigure cors settings.

" My Problem is Asp.net Web Api Cors. I Add referance Microsoft. Owin.Cors and Startup.cs Append useCors All bug fixed."
image