REST API error in dockerized image of an angular app with proxy

Question

I am working on an app where I am calling a 3rd party API. My API in local and production looks something like the following

1. http://localhost:4200/rest/api/2/search?jql=search_query
2. http://10.168.8.59/rest/api/2/search?jql=search_query

Now in my localhost it works fine. I create a proxy.conf.json to bypass the CORS error and it's the following:

proxy.conf.json

{
    "/rest/*": {
        "target": "https://subdomain.maindomin.com/",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

Unfortunately when I am trying to deploy the production in the server it is giving me the 404 Not Found error. Here is the snap of the error.

I am using docker and here is my Dockerfile looks like

FROM node:latest AS builder
WORKDIR /app
COPY . .
RUN npm i && npm run prod_build
FROM nginx:alpine
RUN mkdir /usr/share/nginx/html/plan
RUN chmod -R 777 /usr/share/nginx/html/plan
COPY --from=builder /app/dist/plan /usr/share/nginx/html
COPY --from=builder /app/dist/plan /usr/share/nginx/html/plan
COPY /nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

My nginx.conf looks like this

server {
    listen 80;
    listen [::]:80;

    root /usr/share/nginx/html;
    index index.html index.htm;

    server_name 10.168.8.59;
    location / {
        try_files $uri $uri/ =404;
    }

    location /plan/ {
        try_files $uri $uri/ /plan/index.html;
    }

}

I also have a docker proxy file which was created for the VM server

{   
"proxies":

      {
     "default":
         {
          "httpProxy": "http://emea.proxydomain.com:8080",
          "httpsProxy": "http://amec.proxydomain.com:8080"
         }

       }
    
}

I after running the container I checked the log of the container it says "/usr/share/nginx/html/rest/api/2/search" failed (2: No such file or directory)

My angular service.ts looks like the below

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders()
.set('cache-control', 'no-cache')
.set('content-type', 'application/json')
.append('Authorization', 'Bearer ' + token)
.set('Access-Control-Allow-Origin', '*')

@Injectable({
  providedIn: 'root'
})

export class AdminService {

  baseURL: string = '/rest/api/2/search?jql=search_query';
  
  constructor(private http: HttpClient) { }

  getIssues() {
    return this.http.get(this.baseURL, { headers: headers })
  }

}

Can anyone please help me? What am I doing wrong?

REST API error in dockerized image of an angular app with proxy

0 Answers