CODEWITHSUNDEEP
angularionic-frameworkcorsionic4
Z.Richard
Z.Richard

Reputation: 337

Ionic v4: Using Proxy to resolve CORS fails

I know that it is a common problem and has been asked many times. But all methods just didn't work in ionic v4.

I want to get data from this URL: http://data.szmb.gov.cn/szmbdata/open/openData.do?type=""&appid=""&appKey="";

Methods tried:

  1. Use the chrome "enable cross-origin resource sharing" plugin. Failed.
  2. Ionic-native and Cordova plugin. This method returns a Promise, but I want an Observable.
  3. Editing proxy.conf.json file and add this to angular.js, like this:

proxy.conf.json:

{
    "/openData.do?": {
       "target": "http://data.szmb.gov.cn/szmbdata/open",
       "changeOrigin": true,
       "secure": false,
       "logLevel": "debug"
     }
}

Angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },

which is provided by https://forum.ionicframework.com/t/proxy-config-not-working-for-v4-beta/139400.

  1. Add proxies to ionic.config.json - this just doesn't seem to work on ionic v4.

My ionic info:

    Ionic:

       ionic (Ionic CLI)             : 4.10.3 (C:\Users\15432\AppData\Roaming\npm\node_modules\ionic)
       Ionic Framework               : @ionic/angular 4.0.1
       @angular-devkit/build-angular : 0.12.4
       @angular-devkit/schematics    : 7.2.4
       @angular/cli                  : 7.2.4
       @ionic/angular-toolkit        : 1.4.0

    Cordova:

       cordova (Cordova CLI) : 8.1.2 ([email protected])
       Cordova Platforms     : none
       Cordova Plugins       : no whitelisted plugins (1 plugins total)

    System:

       NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
       npm    : 6.4.1
       OS     : Windows 10

Edit: I tried another method provided by ionic proxy document (https://ionicframework.com/docs/cli/using-a-proxy). Still somehow doesn't work. Supposedly, when I already set proxy to like, "http://data.szmb.gov.cn/szmbdata/open/", I would only need to type http.get(openData.do? + ......) to get to the destination. But instead, ionic serve still returns a "localhost:8100/openData.do?...", as is the case of method 3.

Upvotes: 4

Views: 12018

Answers (3)

NoxFly
NoxFly

Reputation: 308

Just got the same question as you, and I resolved it by 2 methods, but my favorite is the second.

Method 1

thanks this doc : https://ionicframework.com/docs/v3/cli/configuring.html
It's for the v3 but I tried and it worked for the v6.
However, I think it's better to use the second method.

Update your ionic.config.json at the root of your project :

{
    "name": "myApp",
    ...
    "type": "angular",
    "proxies": {
        "path": "/openData.do?",
        "proxyUrl": "http://data.szmb.gov.cn/szmbdata/open"
    }
}

Restart your server with ionic serve.
In this method, you do not need to have a proxy.config.json file.

Method 2

You can directly change the Angular project's settings.

In angular.json, search for this part and add the proxyConfig property :

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "app:build",
        "proxyConfig": "proxy.config.json"
    },
    ...
}

And it will search for your file.
Same as previous method, just re-run with ionic serve.

Upvotes: 0

Gustavo Daniel
Gustavo Daniel

Reputation: 2478

A common mistake when configuring proxies is not to use pathRewrite option when necessary.

For example, if your target api is in:

http://www.example.com/data

and you set as path in your proxy configuration:

/api

you should also remove or replace the /api part from the final url with pathRewrite:

{
  "/api": {
    "target": "http://www.example.com/data",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

And your call will be something like:

this.http.get<ApiResponse>('/api/data/user/10')

So, the proxy will redirect your call to

http://www.example.com/data/user/10

Update:

I see now that you are replacing correctly, but perhaps the answer will help someone else.

Upvotes: 1

Conner Simmons
Conner Simmons

Reputation: 63

You need to run the app using:

ionic serve -- --proxy-config proxy.conf.json

Upvotes: 2

Related Questions