Use your own base url

Orval allows you to set a custom base url for each OpenAPI specification. This can be a part of the url that's been omitted from the specification or the entire url.

1 module.exports = {
2   petstore: {
3     output: {
4       target: 'src/petstore.ts',
5       baseUrl: '/api/v2',
6       // baseUrl: 'https://petstore.swagger.io/v2',
7     },
8   },
9 };

It's also possible to configure the base url directly on your HTTP client instead.

Axios

You can set a default baseUrl for all requests:

 axios.defaults.baseURL = '<BACKEND URL>'; // use your own URL here or environment variable

You can also use an interceptor to do it:

1 axios.interceptors.request.use((config) => {
2   return {
3     ...config,
4     baseURL: '<BACKEND URL>', // use your own URL here or environment variable
5   };
6 });

There is also the possibility to create a custom axios instance. Check the full guide for more details.

 const AXIOS_INSTANCE = axios.create({ baseURL: '<BACKEND URL>' }); // use your own URL here or environment variable

Angular http client

You can use an interceptor to automatically add the url of your API. Like you would do to add an authorization header.

1 import { Injectable } from '@angular/core';
2 import {
3   HttpEvent,
4   HttpInterceptor,
5   HttpHandler,
6   HttpRequest,
7 } from '@angular/common/http';
8 import { Observable } from 'rxjs/Observable';
9 
10 @Injectable()
11 export class APIInterceptor implements HttpInterceptor {
12   intercept(
13     req: HttpRequest<any>,
14     next: HttpHandler,
15   ): Observable<HttpEvent<any>> {
16     const apiReq = req.clone({ url: `<BACKEND URL>/${req.url}` });
17     return next.handle(apiReq);
18   }
19 }

Also remember to add the interceptor to your providers in your module.

1 providers: [
2   {
3     provide: HTTP_INTERCEPTORS,
4     useClass: APIInterceptor,
5     multi: true,
6   },
7 ];

Other client

Depending on the client that you are using, you will need to add it by yourself