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. You can also configure Orval to read the servers field in the specification.

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 };

Using the url from the OpenAPI specification

If you want to use the url defined in your specification, described by the servers field, you can set getBaseUrlFromSpecification to true, which will make Orval correctly identify which base url to use for each operation. Read more about the different settings in the output configuration.

1 module.exports = {
2   petstore: {
3     output: {
4       target: 'src/petstore.ts',
5       baseUrl: {
6         getBaseUrlFromSpecification: true,
7         variables: {
8           environment: 'api.dev',
9         },
10       },
11     },
12   },
13 };

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

Fetch client

Also, if you are using the fetch client, you can still set the request URL with the custom fetch client.

1 const getUrl = (contextUrl: string): string => {
2   const url = new URL(contextUrl);
3   const pathname = url.pathname;
4   const search = url.search;
5   const baseUrl =
6     process.env.NODE_ENV === 'production'
7       ? 'productionBaseUrl'
8       : 'http://localhost:3000';
9 
10   const requestUrl = new URL(`${baseUrl}${pathname}${search}`);
11 
12   return requestUrl.toString();
13 };
14 
15 export const customFetch = async <T>(
16   url: string,
17   options: RequestInit,
18 ): Promise<T> => {
19   const requestUrl = getUrl(url);
20   const requestInit: RequestInit = {
21     ...options,
22   };
23 
24   const request = new Request(requestUrl, requestInit);
25   const response = await fetch(request);
26   const data = await getBody<T>(response);
27 
28   return { status: response.status, data } as T;
29 };

Please refer to the complete sample here

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