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.
Top comments (0)