Axios JSONP Extension

1.1.8 · maintenance · verified Wed Apr 22

axios-jsonp-pro is a plugin that extends the popular Axios HTTP client, adding JSONP (JSON with Padding) request capabilities for web browsers and Node.js environments. While Axios itself is a robust, promise-based client for standard HTTP requests, it does not natively support JSONP, which is often used for cross-domain data fetching from older APIs. This package seamlessly integrates by patching the global Axios instance, allowing developers to make JSONP requests using `axios.jsonp()`. Currently at version 1.1.8, the project appears to be in maintenance mode, with its last publish date being several years ago, though it still functions as a reliable solution for JSONP needs within an Axios-powered application. Its key differentiator is providing a familiar Axios-like API for JSONP, contrasting with standalone JSONP libraries or direct `<script>` tag injection.

Common errors

```
ReferenceError: axios is not defined (when calling axios.jsonp)
```
cause `axios-jsonp-pro` was imported before `axios`, or `axios` was not installed/imported at all.

fix Ensure `axios` is installed (`npm install axios`) and imported or required before `axios-jsonp-pro`. The import order should be `import axios from 'axios'; import 'axios-jsonp-pro';`.
```
JSONP request timeout
```
cause The JSONP server did not respond within the default or specified timeout period, or the callback function was not invoked by the server's response.

fix Increase the `timeout` option in your `axios.jsonp()` call. Verify the JSONP endpoint is active and correctly configured to return data within a reasonable timeframe. Check network connectivity and server logs. The default timeout might be too aggressive for slower networks or servers.
```
Uncaught SyntaxError: Unexpected token ':' (or other parsing errors in browser console after JSONP request)
```
cause The server responded with invalid JSONP, or plain JSON/HTML instead of wrapping the data in the expected callback function. This can also happen if the `callbackParamName` or `callbackFunctionName` is mismatched.

fix Inspect the network response to confirm it's valid JSONP (e.g., `myCallbackFunction({'data': 'value'})`). Ensure the `callbackParamName` in your `axios.jsonp()` configuration matches what the server expects (default is `callback`). If the server expects a specific callback function name, you might need to configure that within the request parameters.

Warnings

gotcha This package extends the global `axios` instance. If you create multiple isolated Axios instances or rely on a specific `axios` object, ensure `axios-jsonp-pro` is imported and applied to the correct instance, or be aware of potential global side effects. It adds `jsonp` directly to `axios.default` if not using named imports.
Fix: Be mindful of import order: `import axios from 'axios'; import 'axios-jsonp-pro';`. If using multiple Axios instances, you might need to manually apply the adapter if the plugin doesn't auto-patch correctly for non-default instances, though `axios-jsonp-pro` is typically for the default global instance.
breaking The underlying `axios` package had critical supply chain compromises (versions `1.14.1` and `0.30.4`) that injected malware. While `axios-jsonp-pro` itself was not compromised, any project using these malicious Axios versions would be affected.
Fix: Audit your `package-lock.json` or `yarn.lock` for affected `axios` versions. Immediately roll back to safe versions (e.g., `axios@1.14.0` or `axios@0.30.3` or earlier) and rotate any exposed credentials. Use `npm cache clean --force` and pin Axios versions to prevent automatic updates to compromised versions.
gotcha JSONP requests are inherently less secure than standard CORS-enabled XHR or Fetch requests due to their reliance on injecting `<script>` tags, making them vulnerable to Cross-Site Scripting (XSS) if the JSONP endpoint is untrusted or improperly secured.
Fix: Only use JSONP with trusted endpoints. Ensure the server-side JSONP implementation properly sanitizes all input and prevents arbitrary code execution in the callback. Consider migrating to modern CORS-enabled APIs where possible.
deprecated JSONP is a legacy technique for cross-domain requests. Modern web development favors CORS (Cross-Origin Resource Sharing) or proxy servers for handling cross-domain communication due to better security and flexibility. JSONP should generally only be used when dealing with older APIs that do not support CORS.
Fix: Prioritize using standard `axios.get()` or `fetch()` with CORS-enabled endpoints. If you must use JSONP, be aware of its limitations and security implications.

Install

npm install axios-jsonp-pro npm
yarn add axios-jsonp-pro yarn
pnpm add axios-jsonp-pro pnpm

Imports

Axios global instance (patched)
wrong:
```
import { jsonp } from 'axios-jsonp-pro'; // Incorrect, it patches the axios instance
```
correct:
```
import axios from 'axios';
import 'axios-jsonp-pro';

// Now axios.jsonp is available
axios.jsonp('/api/data')
```
This package primarily works by adding a `jsonp` method to the global or default Axios instance upon import, acting as a side effect. Ensure Axios is imported/available before importing `axios-jsonp-pro`.

CommonJS require

wrong:

const jsonpAdapter = require('axios-jsonp-pro');
// jsonpAdapter is not directly usable as a function

correct:

const axios = require('axios');
require('axios-jsonp-pro');

// Now axios.jsonp is available
axios.jsonp('/api/data')

Similar to ESM, in CommonJS environments, requiring `axios-jsonp-pro` registers the JSONP functionality onto the globally available `axios` object.

Axios instance with adapter (alternative, less common)

wrong:

axios({ url: '/jsonp', adapter: jsonpAdapter }); // Incorrect for axios-jsonp-pro, this pattern is for other jsonp adapters like 'axios-jsonp'. axios-jsonp-pro patches the instance directly.

correct:

import axios from 'axios';
import jsonpAdapter from 'axios-jsonp-pro';

const instance = axios.create({ adapter: jsonpAdapter });
instance.jsonp('/api/data'); // May not be directly exposed this way, prefer global patch if available.

While some JSONP adapters for Axios work by passing them as an `adapter` option, `axios-jsonp-pro` is designed to directly add the `jsonp` method to the main `axios` instance. The `adapter` pattern shown in some search results refers to different JSONP plugins for Axios, not `axios-jsonp-pro`.

Quickstart

Demonstrates how to perform basic and configured JSONP requests using the `axios.jsonp()` method after importing the plugin, including error handling.

import axios from 'axios';
import 'axios-jsonp-pro'; // This patches the axios instance

async function fetchUserData(userId) {
  try {
    // Basic JSONP request
    const response1 = await axios.jsonp(`/user?ID=${userId}`);
    console.log('User data (basic):', response1.data);

    // JSONP request with custom options, e.g., timeout
    const response2 = await axios.jsonp('/user', {
      timeout: 5000, // 5 seconds timeout
      params: {
        ID: userId,
        callback: 'myJsonpCallback' // Specify custom callback parameter name if needed
      }
    });
    console.log('User data (with options):', response2.data);

  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error('JSONP request failed:', error);
    }
  }
}

// Example usage (replace with your actual JSONP endpoint)
fetchUserData(12345);
// Note: This code will only work if a server is configured to respond with JSONP to /user and ID parameter.

view raw JSON →