Only set the user-agent header on the server (#4375)

* Only set the user-agent header on server Signed-off-by: Olga Bulat <[email protected]> * Update frontend/src/data/api-service.ts Co-authored-by: zack <[email protected]> * Lint and remove unused type Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]> Co-authored-by: zack <[email protected]>
WordPress · May 23, 2024 · 925106b · 925106b
1 parent 0e2ed03
commit 925106b
Showing 1 changed file with 21 additions and 23 deletions.
diff --git a/frontend/src/data/api-service.ts b/frontend/src/data/api-service.ts
@@ -4,17 +4,10 @@ import { warn } from "~/utils/console"
 import { AUDIO, IMAGE } from "~/constants/media"
 
 import { userAgent } from "~/constants/user-agent"
+import { isServer } from "~/utils/node-env"
 
 const DEFAULT_REQUEST_TIMEOUT = 30000
 
-/**
- * Openverse Axios request config with adjusted types for our use-case.
- */
-export type OpenverseAxiosRequestConfig = Required<
-  Pick<AxiosRequestConfig, "headers">
-> &
-  AxiosRequestConfig
-
 /**
  * Returns a slug with trailing slash for a given resource name.
  * For media types, converts the name into resource slug when necessary (i.e. pluralizes 'image'),
@@ -34,7 +27,7 @@ export const getResourceSlug = (resource: string): string => {
 const validateRequest = (
   errorCondition: boolean,
   message: string,
-  config: OpenverseAxiosRequestConfig
+  config: AxiosRequestConfig
 ): void => {
   if (errorCondition) {
     warn(
@@ -73,22 +66,22 @@ export interface ApiService {
   post<T = unknown>(
     resource: string,
     data: Parameters<AxiosInstance["post"]>[1],
-    headers?: OpenverseAxiosRequestConfig["headers"]
+    headers?: AxiosRequestConfig["headers"]
   ): Promise<AxiosResponse<T>>
   update<T = unknown>(
     resource: string,
     slug: string,
     data: Parameters<AxiosInstance["put"]>[1],
-    headers: OpenverseAxiosRequestConfig["headers"]
+    headers: AxiosRequestConfig["headers"]
   ): Promise<AxiosResponse<T>>
   put<T = unknown>(
     resource: string,
-    params: OpenverseAxiosRequestConfig
+    params: AxiosRequestConfig
   ): Promise<AxiosResponse<T>>
   delete<T = unknown>(
     resource: string,
     slug: string,
-    headers: OpenverseAxiosRequestConfig["headers"]
+    headers: AxiosRequestConfig["headers"]
   ): Promise<AxiosResponse<T>>
 }
 
@@ -97,27 +90,32 @@ export const createApiService = ({
   accessToken = undefined,
   isVersioned = true,
 }: ApiServiceConfig = {}): ApiService => {
-  const axiosParams: OpenverseAxiosRequestConfig = {
-    baseURL: isVersioned ? `${baseUrl}v1/` : baseUrl,
-    timeout: DEFAULT_REQUEST_TIMEOUT,
-    headers: { "User-Agent": userAgent },
+  const headers: AxiosRequestConfig["headers"] = {}
+
+  if (isServer) {
+    headers["User-Agent"] = userAgent
   }
 
   if (accessToken) {
-    axiosParams.headers["Authorization"] = `Bearer ${accessToken}`
+    headers["Authorization"] = `Bearer ${accessToken}`
+  }
+  const axiosParams: AxiosRequestConfig = {
+    baseURL: isVersioned ? `${baseUrl}v1/` : baseUrl,
+    timeout: DEFAULT_REQUEST_TIMEOUT,
+    headers,
   }
 
   const client = axios.create(axiosParams)
   client.interceptors.request.use(function (config) {
     validateRequest(
       !config.url?.endsWith("/"),
       "API request urls should have a trailing slash",
-      config as OpenverseAxiosRequestConfig
+      config as AxiosRequestConfig
     )
     validateRequest(
       config.url?.includes("//") ?? false,
       "API request urls should not have two slashes",
-      config as OpenverseAxiosRequestConfig
+      config as AxiosRequestConfig
     )
     return config
   })
@@ -185,7 +183,7 @@ export const createApiService = ({
       resource: string,
       slug: string,
       data: Parameters<(typeof client)["put"]>[1],
-      headers: OpenverseAxiosRequestConfig["headers"]
+      headers: AxiosRequestConfig["headers"]
     ): Promise<AxiosResponse<T>> {
       return client.put(`${getResourceSlug(resource)}${slug}`, data, {
         headers,
@@ -199,7 +197,7 @@ export const createApiService = ({
      */
     put<T = unknown>(
       resource: string,
-      params: OpenverseAxiosRequestConfig
+      params: AxiosRequestConfig
     ): Promise<AxiosResponse<T>> {
       return client.put(getResourceSlug(resource), params)
     },
@@ -213,7 +211,7 @@ export const createApiService = ({
     delete<T = unknown>(
       resource: string,
       slug: string,
-      headers: OpenverseAxiosRequestConfig["headers"]
+      headers: AxiosRequestConfig["headers"]
     ): Promise<AxiosResponse<T>> {
       return client.delete(`${getResourceSlug(resource)}${slug}`, { headers })
     },