# How to Load Axios from a CDN in Plain JavaScript Without npm

> Learn to load Axios from a CDN in plain JavaScript with script tags or ES module imports. Access powerful HTTP requests without npm installation.

- Repository: [Firebase/firebase-js-sdk](https://github.com/firebase/firebase-js-sdk)
- Tags: how-to-guide
- Published: 2026-02-16

---

**You can load Axios via a CDN using either a classic `<script>` tag for global access or an ES module import from jsDelivr, unpkg, or cdnjs—no npm install required.**

The Firebase JavaScript SDK demonstrates a proven CDN-first pattern for loading libraries directly in the browser, as seen in the **Script include** section of [`packages/firebase/README.md`](https://github.com/firebase/firebase-js-sdk/blob/main/packages/firebase/README.md) which imports Firebase modules using an ES-module `<script type="module">` tag. You can apply the same axios cdn approach to load Axios instantly without build tools or package managers.

## Why Use an Axios CDN Approach?

Loading Axios from a CDN eliminates build steps and reduces project complexity. The Firebase SDK uses this strategy to deliver modular, self-contained libraries that work immediately in the browser. By following this pattern, you get a single-file, minified Axios bundle that behaves identically to the npm-installed version, complete with global or module-based access depending on your loading method.

## Two Methods to Load Axios via CDN

### Method 1: Classic Script Tag (Global axios)

The simplest approach loads the minified UMD bundle as a classic script. This attaches `axios` as a global variable, compatible with older browsers and simple pages.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Axios via CDN – Classic Script</title>
  <!-- Load Axios from jsDelivr -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <script>
    // axios is now available as a global variable
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => console.log('Response:', response.data))
      .catch(err => console.error('Error:', err));
  </script>
</body>
</html>

```

### Method 2: ES Module Import (Modern Browsers)

For modern browsers supporting `<script type="module">`, import Axios as an ES module. This provides better scope isolation and aligns with the Firebase SDK's recommended loading pattern found in [`packages/firebase/README.md`](https://github.com/firebase/firebase-js-sdk/blob/main/packages/firebase/README.md).

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Axios via CDN – ES Module</title>
  <script type="module">
    // Import the default export from the CDN-hosted bundle
    import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';

    async function fetchPost() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/2');
        console.log('Post:', response.data);
      } catch (e) {
        console.error('Request failed:', e);
      }
    }

    fetchPost();
  </script>
</head>
<body></body>
</html>

```

## Combining Axios CDN with Firebase

If you are already loading Firebase via its CDN, you can add Axios alongside it using the same technique. The Firebase SDK loads each service as an independent ES module from `https://www.gstatic.com/firebasejs/`, and you can import Axios from jsDelivr or unpkg in the same module script.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Firebase + Axios via CDN</title>
  <script type="module">
    // Firebase modules
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js';
    import { getFirestore, doc, getDoc } from 'https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore.js';

    // Axios ES-module import
    import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';

    const firebaseConfig = { /* your config */ };
    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    async function loadData() {
      // Fetch from Firestore
      const snap = await getDoc(doc(db, 'users', 'alice'));
      console.log('Firestore user:', snap.data());

      // Fetch from external API with Axios
      const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
      console.log('Axios response:', response.data);
    }

    loadData();
  </script>
</head>
<body></body>
</html>

```

## Key Implementation Details from Firebase Source

The Firebase JavaScript SDK's architecture validates these CDN loading strategies:

- **[`packages/firebase/README.md`](https://github.com/firebase/firebase-js-sdk/blob/main/packages/firebase/README.md)** – Documents the official **Script include** pattern using `<script type="module">` to import Firebase services directly from `www.gstatic.com`, which serves as the model for loading Axios from jsDelivr or unpkg.

- **`yarn.lock`** – Confirms the Firebase SDK's tooling depends on `axios@^1.6.0`, verifying that the library versions available on CDNs are fully compatible with modern Firebase applications.

- **`docs-devsite/`** – Contains additional documentation examples for CDN-based library loading (e.g., Firebase Analytics) that demonstrate the same ES-module techniques applicable to Axios.

## Summary

- **Axios CDN loading** requires only a `<script>` tag pointing to jsDelivr, unpkg, or cdnjs—no npm install or build tools needed.
- **Classic script tags** attach `axios` as a global variable for immediate use in any browser.
- **ES-module imports** provide better scope isolation and align with the Firebase SDK's recommended CDN pattern in [`packages/firebase/README.md`](https://github.com/firebase/firebase-js-sdk/blob/main/packages/firebase/README.md).
- **Version compatibility** is confirmed by the Firebase SDK's own `yarn.lock` which references `axios@^1.6.0`.
- **Combined loading** works seamlessly—Axios can coexist with Firebase when both are loaded via CDN ES modules.

## Frequently Asked Questions

### Can I use Axios from a CDN in older browsers?

Yes, by using the classic script tag method with the minified UMD bundle. This approach attaches `axios` as a global variable and works in browsers that do not support ES modules. The Firebase SDK maintains similar backward compatibility by offering both module and classic script loading options.

### Which CDN is most reliable for Axios?

jsDelivr, unpkg, and cdnjs are all reliable options. jsDelivr is often preferred for production because it uses multiple CDN providers for failover and offers automatic optimization. The URLs follow the pattern `https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js` for the minified version.

### Does loading Axios from a CDN support all features?

Yes, the CDN bundles are complete builds that include all Axios features including request/response interceptors, automatic JSON transformation, and error handling. The `yarn.lock` file in the Firebase repository confirms that the SDK depends on full Axios versions (`axios@^1.6.0`), ensuring feature parity between CDN and npm installations.

### How do I verify the Axios version loaded from a CDN?

You can check the version by logging `axios.VERSION` in your console after loading the script. For ES module imports, you can also inspect the network tab in developer tools to confirm the exact URL being fetched (e.g., [`axios.min.js`](https://github.com/firebase/firebase-js-sdk/blob/main/axios.min.js) from `cdn.jsdelivr.net/npm/axios@1.6.0/dist/` if you specify a version).