Why http://localhost:4200 is appended to HttpClient API?

Question

I am working with Angular7.

When I make API call Angular application URL also appended to the URL

const payload = {
        id: 1,
        name: 'ABC
    };
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    };
  this.http.post("http://localhost:8080/my-server/getData", payload, httpOptions);

For eg: http://localhost:4200/http://localhost:8080/my-server/getData

Which results 404 error.

Using "@angular/http": "7.2.11",

Do you have an angular interceptor (maybe setup for ssr) or angular dev setup proxy ? — David, Jul 03 '20 at 16:28

Aishvarya Shrivastava · Answer 1 · 2020-07-03T17:24:08.257

    Ok, first create 
    1. Util.ts file -- 
    import * as pe from 'parse-error';
    import { environment } from '../../environments/environment';
export class Util {
    static async post(url, data, isFormData?: any) {
        var headers = new Headers();
        if (url[0] == '/'){
          url = this.getApiUrl() + url;
          headers = this.apiHeaders(headers, isFormData);
        }
        let err, res;
        [err, res] = await this.to(this.http.post(url, data, { headers: headers }).toPromise(), false);
        return this.responder(err, res);
      }
      static to(promise, parse?) {// global function that will help use handle promise rejections, this article talks about it http://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/
        return promise.then(data => {
          return [null, data];
        }).catch(err => {
          if (parse === false) return [err];
          return [pe(err)]
        });
      }
      static getApiUrl(){
        return environment.apiUrl;
      }
      static apiHeaders(headers: any, isFormData?: any) {
        if (isFormData !== undefined) {
          headers.append('mimeType', 'multipart/form-data');
        } else {
         headers.append('Content-Type', 'application/json');
        }
        let user:User = <User> User.Auth();
        if (user){
          let token: string = user.token;
          headers.append('Authorization', token);
        }
        return headers;
      }
      static responder(err, res){
        let send;
        if (err) send = err;
        if (res) send = res;
        return JSON.parse(send._body);
      }
}
 1. Update environment file -- 
       <code>
export const environment = {
    production: false,
    apiUrl: 'http://localhost:8080'
  };
    </code>
 2. Update your Component - 
 <code>
    import { Util } from './../helpers/util.helper';
    static async getBuLevelResult(startDate, endDate,  otherData?: any) {
      let err, res; // get from API
      const u_id = this.getlocalStorage('User');
      let dataSet: any;
      dataSet = {
        'startDate': startDate + ' 00:00:00',
        'endDate': endDate + ' 23:59:00'
      };
      if (otherData) {
        dataSet.projectId = otherData.projectId;
      }
      [err, res] = await Util.to(Util.post('/selfService/user/' + u_id[0].userId + '/dashboard/piechart/getBuLevelData', dataSet));
      if (err) {
        Util.TE(err.message, true);
      } else {
        return res.data;
      }
    }

</code>

score -1 · Answer 2 · answered Jul 03 '20 at 16:03

-1

no need to add localhost you just need to call /my-server/getData and url will be localhost:4200/my-server/getData.

answered Jul 03 '20 at 16:03

kailash

20
5

1

My server isde application is running in another server Tomcat with port 8080. So if I remove localhost, then the whole url will be wrong – Gnik Jul 03 '20 at 16:21
that will cal api method.you can make it running than no need to call – kailash Jul 03 '20 at 17:39

Why http://localhost:4200 is appended to HttpClient API?

2 Answers2