angular - HttpClient adding slash before query params in URL - Stack Overflow

admin管理员组

文章数量:1122846

Using angular 18 I am trying to send a GET request to my api.

export class ClinicAnalyticsService {

  private routeBase : string = `${environment.apiBase}/api/analytics`

  constructor(private http: HttpClient) { }

  getAll = (page: number) : Observable<ClinicService> => 
    this.http.get(`${environment.apiBase}/api/analytics`, {
      params: new HttpParams()
        .set('page', page)
        .set('limit', 10)
    }).pipe(
      map(({data}: any) => ({
          ...data,
          count: data.count,
          analytics : data.analytics.map((clinic: any) => ({...clinic, page}))
        })
      )
    )

---

I have tried adding query parameters without using HttpParams

`${this.routeBase}?page=${page}&limit=10`

I have tried adding query parameter with the HttpParams library as seen above. For some reason both outcomes produce this URL

http://127.0.0.1:5000/api/analytics/?page=1&limit=10

why is this occuring?

Using angular 18 I am trying to send a GET request to my api.

export class ClinicAnalyticsService {

  private routeBase : string = `${environment.apiBase}/api/analytics`

  constructor(private http: HttpClient) { }

  getAll = (page: number) : Observable<ClinicService> => 
    this.http.get(`${environment.apiBase}/api/analytics`, {
      params: new HttpParams()
        .set('page', page)
        .set('limit', 10)
    }).pipe(
      map(({data}: any) => ({
          ...data,
          count: data.count,
          analytics : data.analytics.map((clinic: any) => ({...clinic, page}))
        })
      )
    )

---

I have tried adding query parameters without using HttpParams

`${this.routeBase}?page=${page}&limit=10`

I have tried adding query parameter with the HttpParams library as seen above. For some reason both outcomes produce this URL

http://127.0.0.1:5000/api/analytics/?page=1&limit=10

why is this occuring?

• angular

Share Improve this question Follow edited Nov 21, 2024 at 20:07 Mark Hill asked Nov 21, 2024 at 20:01 Mark HillMark Hill 1,83922 gold badges1717 silver badges3535 bronze badges 5

• Check in your environment variables file (or other) what is the value of environment.apiBase. Might be ending with "/" – underflow Commented Nov 21, 2024 at 20:05
• @underflow I have updated the code to show how the base url is constructed – Mark Hill Commented Nov 21, 2024 at 20:07
• Could also have something to do with the webserver configuration. Do you notice any redirects happening from 127.0.0.1:5000/api/analytics -> 127.0.0.1:5000/api/analytics – Jay Lane Commented Nov 21, 2024 at 20:18
• @JayLane yes I get a xhr/redirect from disk cache after the initial call – Mark Hill Commented Nov 21, 2024 at 20:23
• is the redirect specifically adding a forward slash to the end of the url? – Jay Lane Commented Nov 21, 2024 at 21:30

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I'm not using angular, but had many similar issues with React/React-Router with a whole different set of behaviors when compiled and deployed to IIS. Maybe not the best solution, but I went with the route of putting the api base in a configuration file and reading it at runtime. Note: in dev mode, I had the VITE server proxy set to my dev server target. Here are the functions I used, in case you find them useful:

    let webSettings: any | undefined = undefined;

const fetchWebSettings = async () =>
{
    if ( !webSettings )
    {
        const route = 'config/web-config.json';
        const response = await fetch(
            route, {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                //'mode': "no-cors"
            }
        } );

        if ( !response.ok )
        {
            throw new Error( `Failed to load: ${ route }` );
        }

        const settings = await response.json();
        webSettings = settings;
    }

    return webSettings;
};

export const getApiTarget = async () =>
{

    let target = "/api/";

    /// - in production mode, fetch the web api address from web-config.json
    if ( import.meta.env.MODE !== 'development' )
    {
        const webSettings = await fetchWebSettings();
        target = `${ webSettings.apiTarget }/`;
    }

    return target;

};

To reference the config:

    const apiTarget = await getApiTarget();
    const apiRoute = `${apiTarget}route/call`;

本文标签： angularHttpClient adding slash before query params in URLStack Overflow