axios-1.0.0-migration-guide

crowd-sourced migration guide for axios1.0.0

• CONTRIBUTING GUIDE

axios links

• axios docs
• official migration guide
• axios Community Discussion
• Upgrade Guide needs to be updated with 0.x.x -> 1.0.0
• Is axios@1 stable?
• CVE-2023-45857 axios@0.x vulnerability and patch

---

BREAKING CHANGES

Documenting the potential breaking changes between 0.27.2...1.0.0

1. not all have solutions, but are here for completeness
2. this guide mentions 1.0.0, but most likely you will want to go to the latest 1.x version

import from @bundled-es-modules

from @ghiscoding via axios/axios#4996 (comment)

If you were using axios@0.x with ESM/Vite, such as in Vue3, your import syntax may have changed:

- import { axios } from '@bundled-es-modules/axios';
+ import axios from 'axios';

AxiosRequestConfig for http interceptors

from @ghiscoding via axios/axios#4996 (comment)

the only other issue we had was with the AxiosRequestConfig interface that we use in our http interceptors and for that we simply had to switch to the InternalAxiosRequestConfig interface

- import { axios, AxiosRequestConfig, AxiosResponse } from '@bundled-es-modules/axios';
+ import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';

function startInterceptors() {
  axios.interceptors.request.use(onRequestFullfilled, onRequestResponseRejected);
  axios.interceptors.response.use(onResponseFullfilled, onRequestResponseRejected);
}

async function onRequestResponseRejected(reason: AxiosError<string>) {
-  const originalRequest = reason.config;
+  const originalRequest = reason.config as InternalAxiosRequestConfig;
   // ...
}

request.headers shape changes

from @josias-r via axios/axios#4996 (reply in thread)

Look out for the shape of request.headers to have changed.

-    if (request.headers?.common?.Authorization) {
-      request.headers.common.Authorization =
+    if (request.headers?.Authorization) {
+      request.headers.Authorization =
        axiosInstance.defaults.headers.common.Authorization;
    }

paramsSerializer shape changes

from @vovkvlad via axios/axios#4996 (reply in thread)

Look out for the shape of the paramsSerializer to have changed. Although the new README has the new structure, the official docs site is still referring to the old structure.

axios.get(url, {
- paramsSerializer: (params) =>
-           doSmth(params),
+ paramsSerializer: { serialize: (params) => doSmth }

Note

As of axios@v1.3.5, the paramSerializer option can again be a function. Thanks to @drichar for reporting

Multipart form data is no longer automatically set

from @leonbloy via #5

This got me after migrating from 0.27.2 to 1.5

axios/axios#5556

I'm not sure when it changed

In Axios , a request which includes a formData payload as in

const formData = new FormData()
formData.append("sample", "sample")

axiosInstance({
   url: "inventories",
   method: "post",
   data: formData,
 },

will automatically include the header 'Content-Type': 'multipart/form-data'.

Previously, that happened even if a 'Content-Type': 'application/json' was set.

Now (after 1.x ?), in that case, Axios will serialize FormData/HTMLForm object to JSON.

Optional Headers error when empty string

from @mmarrius via #7

If your config looked something like this in v 0.x

  const config = {
      baseURL: baseUrl,
      method: 'GET',
      headers: accessToken && { Authorization: "Bearer " + accessToken }
  }

know that if accessToken is false it will end up with a header name must be a non-empty string error in v 1.x.

You can remove the extra check of accessToken && in which case the header's value will become Bearer false. Having the header present however, means that the request is not public anymore so the better solution would be to not send the header at all, in case you don't have the token.

const config = {
    baseURL: baseUrl,
    method: 'GET',
}

if (accessToken) {
    config.headers = { Authorization: "Bearer " + accessToken }
}

Serialization of get params

axios/axios#5630

axios.create is not a function

axios/axios#5613

headers are not availabile in beforeRedirect

axios/axios#5365

axios attempts to resolve IPv6 addresses as hostnames

axios/axios#5333

settle helper not exported, or anything from lib/helpers

internals that may not be exposed anymore

axios/axios#5254 axios/axios#5072

error.config on AxiosError ERR_INVALID_CHAR

axios/axios#5089 - thanks for reporting @Duncan-Brain

Request config changes

https://github.com/axios/axios-docs/pull/126/files