Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
JSONP was a technique to load data from third-party servers, bypassing the same-origin policy. While CORS is now the standard approach, understanding JSONP provides historical context and you may encounter it in legacy codebases.
The problem JSONP solved
By default you can’t load a JSON file from a domain and port that’s different from your current one. You might serve your app from localhost:8080, but the API is served from localhost:2001.
This is blocked for security reasons by the Same-Origin Policy.
How JSONP works
JSONP exploits the fact that <script> tags are not subject to the same-origin policy. A server with JSONP support returns JavaScript code instead of plain JSON:
res.jsonp({ username: 'Flavio' })On the client side, you load the endpoint specifying a callback function:
<script src="http://localhost:2001/api.json?callback=handleData"></script>The callback function must be global and will receive the JSON data:
const handleData = (data) => {
console.log(data)
}The server wraps the JSON in a function call: handleData({ username: 'Flavio' }), which executes when the script loads.
Limitations of JSONP
- Only supports GET requests (no POST, PUT, DELETE)
- Security vulnerabilities (the server could execute arbitrary JavaScript)
- No proper error handling
- Requires server-side support
CORS is better
CORS (Cross-Origin Resource Sharing) replaced JSONP as the proper solution. CORS:
- Supports all HTTP methods
- Has proper error handling
- Is more secure
- Works with standard
fetch()and XMLHttpRequest
Use CORS for all new projects. JSONP is only relevant when working with legacy APIs that don’t support CORS.