I have an Angular app that makes REST calls to a "third party" REST-service. Think of this service as something like www.someothercompany/restapi/MyObject/1.
When I run my app locally (via ng serve) my app can make calls to this service.
When I create my container locally, and run my container locally, my app is not working with the service.
So I tried debugging it, I created a terminal window on the local running container (I documented my "add curl" in Can't run Curl command inside my Docker Container)
curl -v --header "Accept: application/json" www.someothercompany/restapi/MyObject/1
and this call works.
My Angular code looks like this:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { environment } from '../../../../environments/environment';
import { MyObjectInfoRequest,MyObjectInfoResponse } from "./myObject-info.model";
@Injectable({ providedIn: 'root' })
export class MyObjectInfoService {
constructor(private http: HttpClient) {
}
getMyObject(myObjectRequest: MyObjectInfoRequest) {
let headers = new HttpHeaders();
headers.append('Accept','application/json');
return this.http.get<MyObjectInfoResponse>(
environment.myObjectInfoUrl+`?`,
{
headers:headers,
params: { _id: myObjectRequest.id }
})
.pipe(map(myObjectInfoResponse => {
return myObjectInfoResponse;
}));
}
}
the http.get looks like my curl command.
Does anybody see anything I'm not doing correctly?
APPEND:
My Dockerfile (constructed mainly from this example : How to create a Docker container of an AngularJS app?)
FROM node:latest as my-thing-builder
LABEL author="ME"
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build -- --configuration=dev
FROM nginx:alpine
#RUN apk add --no-cache curl
# Install prerequisites
#RUN apt-get update && apt-get install -y curl
VOLUME /tmp/cache/nginx
# support running as arbitrary user which belogs to the root group
RUN chmod -R 777 /var/cache/nginx /var/run /var/log/nginx /var/cache/nginx/
# users are not allowed to listen on priviliged ports
RUN sed -i.bak 's/listen\(.*\)80;/listen 8081;/' /etc/nginx/conf.d/default.conf
EXPOSE 8081
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf
COPY --from=my-thing-builder /app/dist /usr/share/nginx/html
COPY ./scaffolding/nginx/nginx.dev /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g","daemon off;"]
#USER 1001
# docker build -t my-thing:dev -f ./scaffolding/docker/my.dockerfile .
# docker run -d -p 8899:8080 my-thing:dev
# the docker run above will allow local http://localhost:8899/
APPEND
Ok....I did get some basic-basic errorHandling in.
My revised version.
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { map, catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { environment } from '../../../../environments/environment';
import { MyObjectInfoRequest,MyObjectInfoResponse } from "./myObject-info.model";
@Injectable({ providedIn: 'root' })
export class MyObjectInfoService {
constructor(private http: HttpClient) {
}
getMyObject(myObjectRequest: MyObjectInfoRequest) {
let headers = new HttpHeaders();
headers.append('Accept','application/json+fhir');
return this.http.get<MyObjectInfoResponse>(
environment.myObjectInfoUrl+`?`,
{
withCredentials: true,
headers:headers,
params: { _id: myObjectRequest.id }
})
.pipe(map(myObjectInfoResponse => {
return myObjectInfoResponse;
})
,
catchError(err => {
//console.log(err);
//alert(err);
this.handleError(err);
return throwError(err)
})
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
//alert('ErrorEvent ' + error.error.message);
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
//alert('Else ' + error.status + ':::' + error.error);
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// return an observable with a user-facing error message
return throwError(
'Something bad happened; please try again later.');
};
}
==========
Aha!
502
Bad Gateway
nginx/1.15.18
ERROR Object { headers: Object, status: 502, statusText: "Bad Gateway", url: "http://localhost:8899/restapi/MyObject/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:8899/restapi/MyObject/1", error: "<html> <head><title>502 Bad Gateway…" }
