axios 1.2.3 causes an AxiosHeader error
Problem
Describe the bug axios 1.2.3 causes an AxiosHeader error The type {Token: string; Refresh: string; } "to type" AxiosRequestHeaders ". Type "{Token: string; Refresh: string; } "Missing the following properties for type" AxiosHeaders ": set, get, has, delete and 19 others Type "{params: {LayoutId: (string | number | null) []; check: string; }; } "cannot be assigned to an argument of type" AxiosRequestConfig<any> ". Type {params: {" LayoutId: (string | number | null) []; check: string; }; The attribute "headers" is missing from "}", but is required for type "AxiosRequestConfig<any>" To Reproduce _No response_ Code snippet _No response_ Expected behavior _No response_ Axios Version _No response_ Adapter Version _No response_ Browser _No response_ Browser Version _No response_ Node.js Version _No response_ OS _No response_ Additional Library Versions _No response_ Additional context/Screenshots _No response_
Error Output
error
The type {Token: string; Refresh: string; } "to type" AxiosRequestHeaders ".
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix AxiosHeader Error in Axios 1.2.3
The error occurs because the headers object being passed does not conform to the expected AxiosRequestHeaders type. Axios 1.2.3 requires headers to be structured as an instance of AxiosHeaders, which includes methods like set, get, has, and delete. The provided headers object lacks these methods, leading to type incompatibility.
Awaiting Verification
Be the first to verify this fix
- 1
Update Headers Structure
Modify the headers object to conform to the AxiosHeaders type. Instead of using a plain object, create an instance of AxiosHeaders.
typescriptimport { AxiosHeaders } from 'axios'; const headers = new AxiosHeaders({ Token: 'your_token', Refresh: 'your_refresh_token' }); - 2
Ensure AxiosRequestConfig Completeness
Make sure that the AxiosRequestConfig object includes all required properties, including headers. If headers are missing, it will lead to type errors.
typescriptconst config = { headers: headers, params: { LayoutId: [1, 2, null], check: 'some_check' } }; - 3
Test Axios Request
Perform a test request using the updated config to ensure that the AxiosHeader error is resolved and the request is successful.
typescriptaxios.get('/your/api/endpoint', config) .then(response => console.log(response)) .catch(error => console.error(error)); - 4
Review TypeScript Configuration
Check your TypeScript configuration to ensure that strict type checking is enabled, which can help catch similar issues in the future.
jsontsconfig.json { "compilerOptions": { "strict": true, // other options } }
Validation
Run the application and verify that the Axios request completes without throwing the AxiosHeader error. Additionally, check the console for the expected response from the API.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep