Difference HTTP handling Ionic View legacy and new version

Hi

I am noticing difference in the way Ionic View (new) handles HTTP (regular requests, not the native plugin) vs the legacy Ionic View.

Legacy did not bother about CORS, but the new Ionic View does, so many of my HTTP requests fail in Ionic View.

Anyone recognises this difference?

Trying to fiddle with native plugin to resolve (issue with build difference local vs ionicjs - HTTP ionic-native)

Work in progress for me.

Regards

Tom

What exactly are you seeing, any debug information?

Hi Sujan12,

The HTTP request give error (error.toString()): Response with status :0 for URL: null,

Example URL: http://gizmodo.com/rss.

I am going to try to get more error info. This is quite minimal and I may be wrong saying it is cors.

But then again, other URLs seem to look fine, that is why I believe it is CORS (e.g http://makezine.com/feed/).

Are Ionic View legacy and pro supposed to work quite similar in handling Http?

I can see the difference also because I have both apps running in legacy and pro and they give different output.

Regards,

Tom

ps


cli packages: (C:\Users\TOM\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : not installed

local packages:

    @ionic/app-scripts : 1.3.1
    Cordova Platforms  : android 6.1.2
    Ionic Framework    : ionic-angular 2.0.1

System:

    Node : v6.11.2
    npm  : 3.10.10
    OS   : Windows 7

Hi @Sujan12

I have done some more testing. I ensured all dependencies are up to date, including native.

Ionic info:

cli packages: (C:\Users\tom\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.2
    npm  : 3.10.10
    OS   : Windows 7

Package:

{
  "name": "newzee",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/http": "^4.2.1",
    "@ionic-native/in-app-browser": "^4.2.1",
    "@ionic-native/social-sharing": "^4.2.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "cordova-android": "^6.2.3",
    "cordova-plugin-advanced-http": "^1.5.9",
    "cordova-plugin-compat": "^1.0.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-plugin-x-socialsharing": "^5.2.0",
    "es6-promise-plugin": "^4.1.0",
    "ionic-angular": "3.6.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "pixl-xml": "^1.0.13",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-advanced-http": {}
    },
    "platforms": [
      "android"
    ]
  }
}

I also worked on config.xml:

   <allow-navigation href="*" />

Ionic View legacy allows to load all URLs. Ionic Serve gives CORS errors but loads some feeds which have different CORS setting (e.g. Makezine: http://makezine.com/feed/). Ionic View Pro does the same as Ionic Serve.

I also tried native plugin HTTP, but this doesn’t seem to work in Ionic View Pro (ERROR plugin_not_installed).

As to the CORS error message in Ionic View Pro: this message is very minimal, but this seems to be also according to specs. https://stackoverflow.com/questions/4844643/is-it-possible-to-trap-cors-errors

Any suggestions how to go on?

(another test I am thinking of, is to build on android and try on a phone)

Update: ionic cordova run android works fine, no cors.

Regards

Tom

I would try to talk to someone from Ionic:
http://ionicframework.com/support#support
(or use the button on the new dashboard, bottom right)

The new Ionic View is too new for much knowledge here in the forum.
(Information on supported plugins is missing for now as well for example)

Hi
thank you. will do and update here accordingly.
Tom

Hi all,

I have received reply from the support team:

Thanks for getting in touch! I’ve spoken with our View dev team, and this is expected behavior. The new Ionic View uses WKWebView, which enforces CORS. We’ll track if this is a common request, but for the time being CORS will be enforced.

There is much talk on the forum on CORS/WKWebView (iOS related), but I’m not sure if any of the workarounds will work if the native HTTP plugin also isn’t supported.

So for now, I will stay to legacy until I got some solution for pro.

Regards,

Tom

1 Like