How I Used Ionic 4 CLI Proxy To Redirect API Requests And Avoid CORS Errors

I recently refactored an Ionic Angular app that previously made use of jQuery to fetch data and update the view 😔. Having moved the API calls into dedicated services, all API requests were blocked by the browser given the different origins (localhost vs external api url).

I went ahead and created the file src/proxy.conf.json and updated angular.json to incorporate the new proxy settings (more here).

First up creating src/proxy.conf.json.

{
  "/api/*": {
    "target": "https://my-api-domain.com/api",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

Then updating angular.json by including the above proxy configuration.

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

I then adapted my service to the new proxy setting as below, replacing the previously used full api path with just /api).

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {JourneyName} from '../models/journey-name';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class JourneysService {

  constructor(private http: HttpClient) {}

  getJourneyName(journeyId: number): Observable<JourneyName> {
    const body = new FormData();
    body.append('journey', `${journeyId}`);

    return this.http.post(
        `/api/get-journey-name`,
        body
      ) as Observable<JourneyName>;
  }
}

To my surprise I still got the CORS error after testing. A couple more minutes searching Google and I found out Ionic has it’s own CLI proxy - Service Proxies, meaning it doesn’t use that of Angular under the hood. Ok.

Went ahead and configured it as follows inside ionic.config.json:

{
  "name": "sampleAppName",
  "integrations": {
    "cordova": {}
  },
  "type": "angular",
  "id": "01aae245",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://my-api-domain.com/api"
    }
  ]
}

Now it should work! :-) Ran ionic serve, didn’t work, was still getting the CORS error as proxy redirect was for some reason not being triggered. Then tried ionic serve --proxy-config src/proxy.conf.json, still didn’t work.

Did another Google search, found this Stackoverflow answer which suggested using ionic serve -- --proxy-config src/proxy.conf.json, notice the extra dashes --. This worked!!

Thus I ended up passing the Angular proxy.conf.json to the ionic serve command. Will update this post should I find a way to make the proxy redirect work with the configuration in ionic.config.json, and if you do know how to, please leave a reply in the comment :-).

Also what exactly do the extra dashes -- do? Will equally update the post when I find out, I believe I’ve come across something similar before.

Tags