Tengo una aplicación angular (es la versión de producción). La aplicación está disponible en dos enlaces (http://blabla.com, http://test.com). Ahora: para cualquier url que abra la aplicación, el frente envía solicitudes de backend por url (test.com/api), porque está codificado en entornos. Y debería hacer solicitudes de backend dependiendo de la URL que tenga. Por ejemplo, la URL es blablabla.com y tengo que crear una solicitud para backend blablabla / api

     private apiUrl = environment.apiUrl.replace(/[/]+$/, '');
    
     private getUrl(url: string): string 
        return `${this.apiUrl}/${url}`;
      }

     public get<TResponse extends ApiResponse<any>>(url: string, options?: ApiRequestOptions): Observable<any> {
    let requestUrl = this.getUrl(url);
    let httpOptions = this.getHttpOptions(options);
    if (options && options.observe) {
      return this.httpClient.get<TResponse>(requestUrl, {
        observe: options.observe,
        ...httpOptions,
      });
    } else {
      return this.httpClient.get<TResponse>(requestUrl, httpOptions);
    }
  }

    export const environment = {
      production: true,
      apiUrl: 'https://test.com/api/v1/',
    };
0
evrenior 24 jun. 2020 a las 11:07

3 respuestas

La mejor respuesta

Si tienes un servicio ex. getSomeDataService, puede inyectar su componente y usarlo así. getSomeData.service.ts:

import {HttpClient, HttpHeaders} from '@angular/common/http';
...
// headers if they are needed

getDataBack(url: string) {
        return this.http.get(url);
    }

Somethig.component.ts:

...
import {GetSomeDataService} from '../services/getSomeData.service';
...

// inject into constructor
constructor(private getSomeService: GetSomeDataService){}

// after that in ngOnInit or elsewhere

ngOnInit() {
   url = location.host+'/api'; // or location host
   this.getSomeService(url)
   .subscribe(response => console.log());
} 

Actualizar
Entonces tienes lo siguiente:

// hardcoded url which located in src/environment.prod.ts not necessary
 //private apiUrl = environment.apiUrl.replace(/[/]+$/, '');
    
     private getUrl(url: string): string 
        //return `${this.apiUrl}/${url}`;
        //here change the logic..
          return `${location.host}/${url}`;
      }
0
Beller 24 jun. 2020 a las 14:03

Solo puede especificar la ruta y el navegador agregará su host actual (blablabla.com u otro). Entonces, si su host es 'blablabla.com', el método makeRequest hará la solicitud de 'blablabla.com/api'.

  constructor(private http: HttpClient) {}

  public makeRequest() {
    return this.http.get('/api');
  }
2
shumih 24 jun. 2020 a las 08:15

Puede usar location.host para obtener el nombre de host actual y luego agregar los detalles de su punto final.

0
Cristian Sarghe 24 jun. 2020 a las 08:15