angular - Nativescript localhost http call fails on iOS

Question

I am using Nativescript sidekick cloud build on windows to test my app on iOS - I have also connected my iPhone.

According to this post I am sending my http requests to localhost but they keep failing with this error.

Http failure response for http://localhost:52553/api/rewards/all: 0 Unknown Error
Error: Could not connect to the server.

Here is my implementation of rewards service

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { Observable, of } from 'rxjs';
import { SimpleReward } from "../models/simple-reward";
import { take, catchError } from "rxjs/operators";

@Injectable()
export class RewardsService {

    private baseUrl = "http://localhost:52553/api/rewards";

    constructor(private http: HttpClient) { }

    getAllRewards(): Observable<SimpleReward[]> {
        const url = `${this.baseUrl}/all`;
        return this.http.get<SimpleReward[]>(url).pipe(
            catchError((e) => {
                console.error(e);
                return of([]);
            })
        );
    }
}

Answer 1

Add localhost as an exception to your app/App_Resources/iOS/Info.plist file to allow insecure (non-HTTPS) communication with the http://localhost domain:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

This is preferable to allowing insecure communication with all domains.

EDIT: Also, remember that you must rebuild your app after editing that Info.plist file! Its changes cannot simply be live-synced or hot module reloaded like JS.