{"id":17164,"library":"axios-jsonp-pro","title":"Axios JSONP Extension","description":"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.","status":"maintenance","version":"1.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/RekingZhang/axios-jsonp","tags":["javascript","xhr","http","ajax","promise","node","jsonp","typescript"],"install":[{"cmd":"npm install axios-jsonp-pro","lang":"bash","label":"npm"},{"cmd":"yarn add axios-jsonp-pro","lang":"bash","label":"yarn"},{"cmd":"pnpm add axios-jsonp-pro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is an adapter/plugin for Axios and extends its functionality. Axios must be installed separately.","package":"axios","optional":false}],"imports":[{"note":"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`.","wrong":"import { jsonp } from 'axios-jsonp-pro'; // Incorrect, it patches the axios instance","symbol":"Axios global instance (patched)","correct":"import axios from 'axios';\nimport 'axios-jsonp-pro';\n\n// Now axios.jsonp is available\naxios.jsonp('/api/data')"},{"note":"Similar to ESM, in CommonJS environments, requiring `axios-jsonp-pro` registers the JSONP functionality onto the globally available `axios` object.","wrong":"const jsonpAdapter = require('axios-jsonp-pro');\n// jsonpAdapter is not directly usable as a function","symbol":"CommonJS require","correct":"const axios = require('axios');\nrequire('axios-jsonp-pro');\n\n// Now axios.jsonp is available\naxios.jsonp('/api/data')"},{"note":"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`.","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.","symbol":"Axios instance with adapter (alternative, less common)","correct":"import axios from 'axios';\nimport jsonpAdapter from 'axios-jsonp-pro';\n\nconst instance = axios.create({ adapter: jsonpAdapter });\ninstance.jsonp('/api/data'); // May not be directly exposed this way, prefer global patch if available."}],"quickstart":{"code":"import axios from 'axios';\nimport 'axios-jsonp-pro'; // This patches the axios instance\n\nasync function fetchUserData(userId) {\n  try {\n    // Basic JSONP request\n    const response1 = await axios.jsonp(`/user?ID=${userId}`);\n    console.log('User data (basic):', response1.data);\n\n    // JSONP request with custom options, e.g., timeout\n    const response2 = await axios.jsonp('/user', {\n      timeout: 5000, // 5 seconds timeout\n      params: {\n        ID: userId,\n        callback: 'myJsonpCallback' // Specify custom callback parameter name if needed\n      }\n    });\n    console.log('User data (with options):', response2.data);\n\n  } catch (error) {\n    if (axios.isCancel(error)) {\n      console.log('Request canceled', error.message);\n    } else {\n      console.error('JSONP request failed:', error);\n    }\n  }\n}\n\n// Example usage (replace with your actual JSONP endpoint)\nfetchUserData(12345);\n// Note: This code will only work if a server is configured to respond with JSONP to /user and ID parameter.","lang":"typescript","description":"Demonstrates how to perform basic and configured JSONP requests using the `axios.jsonp()` method after importing the plugin, including error handling."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":"axios@1.14.1, axios@0.30.4 (Axios dependency)"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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';`.","cause":"`axios-jsonp-pro` was imported before `axios`, or `axios` was not installed/imported at all.","error":"ReferenceError: axios is not defined (when calling axios.jsonp)"},{"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.","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.","error":"JSONP request timeout"},{"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.","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.","error":"Uncaught SyntaxError: Unexpected token ':' (or other parsing errors in browser console after JSONP request)"}],"ecosystem":"npm","meta_description":null}