Axios Error: Header content contains an invalid character ['adapter']

Question

Axios Error: Header content contains an invalid character ['adapter']

Here is a code snippet that highlights the problem:

import axios, { AxiosRequestConfig } from "axios";

function combineRequestParams(defaultParams: AxiosRequestConfig, params1: AxiosRequestConfig, params2?: AxiosRequestConfig): AxiosRequestConfig {
  return {
    ...defaultParams,
    ...params1,
    ...(params2 || {}),
    headers: {
      ...defaultParams,
      ...(params1.headers || {}),
      ...((params2 && params2.headers) || {}),
    },
  };
}

(async () => {
  try {

    const client = axios.create({

      transformRequest: [(data, headers) => { return data; }],   // Omitting this line causes: Invalid character in header content ["transformRequest"] 
      transformResponse: [(data, headers) => { return data; }], // Not including this line results in: Invalid character in header content ["transformResponse"] 

      baseURL: "https://localhost:7001/",
    });

    const requestParams = combineRequestParams(client.defaults, {}, {})

    client.request({
      ...requestParams,
      headers: {
        "Content-Type": "application/json",
        ...requestParams.headers,
      },
      params: {date:'2020-03-31'},
      responseType: 'json',
      url: '/overview',
    });

  } catch (error) {
    console.log(error);
  }
})();

The error message you may encounter is:

(node:60845) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["adapter"]
    at ClientRequest.setHeader (_http_outgoing.js:529:3)
    at new ClientRequest (_http_client.js:241:14)
    at Object.request (https.js:314:10)
    at RedirectableRequest._performRequest (/Users/kamz/workspace/clarity/clarity-model/node_modules/follow-redirects/index.js:262:24)
    at new RedirectableRequest (/Users/kamz/workspace/clarity/clarity-model/node_modules/follow-redirects/index.js:60:8)
    at Object.request (/Users/kamz/workspace/clarity/clarity-model/node_modules/follow-redirects/index.js:458:14)
    at dispatchHttpRequest (/Users/kamz/workspace/clarity/clarity-model/node_modules/axios/lib/adapters/http.js:195:25)
    at new Promise (<anonymous>)
    at httpAdapter (/Users/kamz/workspace/clarity/clarity-model/node_modules/axios/lib/adapters/http.js:46:10)
    at dispatchRequest (/Users/kamz/workspace/clarity/clarity-model/node_modules/axios/lib/core/dispatchRequest.js:52:10)
(node:60845) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:60845) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

typescript axios

Answer 1

Answer №1

Your mergeRequestParams function has an error in the way it handles headers. Instead of spreading ...defaultParams in the headers, you should spread ...defaultParams.headers.

You can actually spread undefined, so you can simplify the code like this:

function mergeRequestParams(defaultParams: AxiosRequestConfig, params1: AxiosRequestConfig, params2?: AxiosRequestConfig): AxiosRequestConfig {
  return {
    ...defaultParams,
    ...params1,
    ...params2,
    headers: {
      ...defaultParams.headers,
      ...params1.headers,
      ...params2?.headers,
    },
  };
}

In my opinion, it would be more efficient to create a separate function that combines two configurations and use it as a callback for Array.reduce to combine multiple configurations.

function mergeTwoParams(params1: AxiosRequestConfig, params2: AxiosRequestConfig): AxiosRequestConfig {
  return {
    ...params1,
    ...params2,
    headers: {
      ...params1.headers,
      ...params2.headers,
    },
  };
}

function mergeRequestParams(...params: AxiosRequestConfig[]): AxiosRequestConfig {
  return params.reduce(mergeTwoParams, {}); // initial value is only needed to prevent error when calling with 0 configs
}

Answer 2

Your mergeRequestParams function has an error in the way it handles headers. Instead of spreading ...defaultParams in the headers, you should spread ...defaultParams.headers.

You can actually spread undefined, so you can simplify the code like this:

function mergeRequestParams(defaultParams: AxiosRequestConfig, params1: AxiosRequestConfig, params2?: AxiosRequestConfig): AxiosRequestConfig {
  return {
    ...defaultParams,
    ...params1,
    ...params2,
    headers: {
      ...defaultParams.headers,
      ...params1.headers,
      ...params2?.headers,
    },
  };
}

In my opinion, it would be more efficient to create a separate function that combines two configurations and use it as a callback for Array.reduce to combine multiple configurations.

function mergeTwoParams(params1: AxiosRequestConfig, params2: AxiosRequestConfig): AxiosRequestConfig {
  return {
    ...params1,
    ...params2,
    headers: {
      ...params1.headers,
      ...params2.headers,
    },
  };
}

function mergeRequestParams(...params: AxiosRequestConfig[]): AxiosRequestConfig {
  return params.reduce(mergeTwoParams, {}); // initial value is only needed to prevent error when calling with 0 configs
}

Axios Error: Header content contains an invalid character ['adapter']

Answer №1

Similar questions

What is the best way to restrict the return type of a function depending on the argument value?

Unexpected character error occurs when using VSCode with Vue: ''‌'

What are some ways to retrieve a summary of an Angular FormArray containing controls?

Tips on transforming current JSON into an alternate JSON format

Guide on how to prevent click events when a checkbox is not selected in Angular 2

Can you explain the functionality of the "lib" tsconfig option?

What are the advantages of using interfaces in React?

Error: The method 'replace' is not a valid function for the specified

The Angular Date Pipe is displaying an incorrect date after processing the initial date value

Is there a way to signal an error within an Observable function that can handle multiple scenarios depending on the specific page being viewed in an Angular application?

The firebase-generated observable is causing the notorious differ error as it is not iterable

JavaScript modules in Node.js do not support non-relative imports properly with Typescript

Hiding components in Angular 4/5 through routing decisions

Mapping an array of JSON objects into a plain JSON object in TypeScript Angular 2: A Guide

"Exploring the power of fp-ts Option with Typescript and handling undefined

Angular component unable to retrieve array data from Angular service

Determining whether an option value has been selected in Angular

Typescript - Iterating through CSV columns with precision

Having trouble with DefaultAzureCredential in Azure

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?