Property 'Authorization' does not exists on type 'AxiosHeaders' after upgrade to 1.2.2
Problem
Summary I'm getting the following error after upgrading axios to version 1.2.2: > TS2339: Property 'Authorization' does not exist on type 'AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>'. > Property 'Authorization' does not exist on type 'AxiosHeaders' The same snippet of code is working on version 1.2.1: [code block] Environment - Axios 1.2.2 - Node.js 18.12.1 - OS: Ubuntu 20.04.4 LTS (WSL2)
Error Output
error after upgrading axios to version 1.2.2:
Unverified for your environment
Select your OS to check compatibility.
2 Fixes
Fix TypeScript Error for 'Authorization' Header in Axios 1.2.2
The error occurs because the Axios library has introduced stricter type definitions in version 1.2.2. The 'Authorization' property is not recognized on the 'AxiosHeaders' type, which is causing TypeScript to throw an error. This change may be due to how headers are now defined and accessed in the updated version.
Awaiting Verification
Be the first to verify this fix
- 1
Update Header Access Method
Modify the way you access the 'Authorization' header to ensure compatibility with the new type definitions in Axios 1.2.2. Instead of directly accessing the property, use the 'set' method provided by AxiosHeaders.
typescriptaxios.defaults.headers.common.set('Authorization', 'Bearer YOUR_TOKEN'); - 2
Check for Other Header Access
Review your code for any other headers being accessed directly. Update those to use the 'set' method as well to prevent similar issues.
typescriptaxios.defaults.headers.common.set('Content-Type', 'application/json'); - 3
Update TypeScript Definitions
Ensure that your TypeScript definitions are up to date. If you're using custom types or interfaces for headers, update them to align with the new Axios types.
typescriptinterface CustomHeaders extends AxiosHeaders { Authorization?: string; } - 4
Run TypeScript Compiler
After making the changes, run the TypeScript compiler to check for any remaining type errors. This will help ensure that all instances of header access are compliant with the new version.
bashtsc --noEmit - 5
Test API Calls
Perform tests on your API calls to verify that the headers are being sent correctly and that the application functions as expected after the changes.
typescriptaxios.get('/api/endpoint');
Validation
Confirm that the TypeScript error no longer appears and that API requests are functioning correctly with the updated header access methods. You can also check the network requests in your browser's developer tools to ensure the 'Authorization' header is being sent.
Sign in to verify this fix
1 low-confidence fix
Fix TypeScript Error for 'Authorization' Header in Axios 1.2.2
The upgrade to Axios version 1.2.2 introduced stricter TypeScript definitions for headers, which no longer recognize custom headers like 'Authorization' directly on the AxiosHeaders type. This is likely due to changes in how headers are typed in the new version, making it necessary to use the correct type assertions or methods to access custom headers.
Awaiting Verification
Be the first to verify this fix
- 1
Update Header Access Method
Instead of directly accessing 'Authorization' on the headers object, use the 'set' method to add the header. This ensures compatibility with the new type definitions.
typescriptaxios.defaults.headers.common.set('Authorization', 'Bearer YOUR_TOKEN'); - 2
Use Type Assertions for Custom Headers
If you need to access 'Authorization' directly, use type assertions to inform TypeScript about the expected structure of the headers. This can be done by casting the headers to 'Record<string, string>'.
typescriptconst authHeader = (axios.defaults.headers.common as Record<string, string>)['Authorization']; - 3
Check for Other Custom Headers
Review your code for other custom headers that may be affected by the upgrade. Apply similar fixes as needed for any other headers that are not recognized.
- 4
Run TypeScript Compiler
After making the changes, run the TypeScript compiler to ensure that there are no remaining type errors. This will help confirm that the changes have resolved the issue.
bashtsc
Validation
To confirm the fix worked, ensure that the TypeScript compiler runs without errors and that the application can successfully make requests with the 'Authorization' header included. You can also log the headers before making a request to verify their presence.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep