Types prevent adding new values to headers
Problem
Describe the bug Types prevent adding new values to headers To Reproduce [code block] [code block] Expected behavior Everything is working Environment - Axios Version 1.0.0
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Update Axios Header Types to Allow New Values
The issue arises because the TypeScript definitions for Axios headers are too restrictive, preventing the addition of new values to the headers object. This is likely due to the use of a specific type that does not accommodate additional string values, leading to type errors when attempting to add new headers.
Awaiting Verification
Be the first to verify this fix
- 1
Modify Axios Header Type Definitions
Update the header type definitions in your Axios configuration to allow for additional string values. This can be done by extending the existing header types.
typescripttype CustomHeaders = { [key: string]: string | number | boolean }; - 2
Implement Custom Header Type in Axios Request
Use the newly defined CustomHeaders type in your Axios request to ensure that new values can be added without type errors.
typescriptconst headers: CustomHeaders = { 'Custom-Header': 'Value', 'Another-Header': 123 }; axios.get('/api/endpoint', { headers }); - 3
Test the Updated Header Configuration
Run your application and perform the API request to verify that the new headers are being sent correctly without any type errors.
typescriptaxios.get('/api/endpoint', { headers }).then(response => console.log(response.data)); - 4
Check for TypeScript Errors
Ensure that there are no TypeScript compilation errors related to the headers. If errors persist, review the header type definitions again.
bashtsc --noEmit
Validation
Confirm that the API request is successful and the response includes the custom headers. Additionally, check the TypeScript compiler output to ensure there are no type errors.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep