The JSONP Guide
JSONP is a way to load data from 3rd party servers, bypassing the same-origin policy
By default you can’t load a JSON file from a domain and port that’s not the current one, and use it in your application.
You might serve the app from localhost:8080
, but the API is served by another Node.js application running on localhost:2001
.
Or you might want to access some publicly available API served as JSON, in the browser.
This is a common need to consume APIs, but in the browser we’re limited as for security reasons, because of the Same-Origin Policy this behavior must be denied by default to prevent possible issues.
JSONP was born before CORS existed. Today, CORS is a more (the only one?) sensible approach to the problem, but it’s useful to also know JSONP which might be better in your case. Also, some security issues were discovered around JSONP since its inception, so you need to know about all the security implications of using JSONP.
JSONP only supports the GET HTTP method, so it’s much less capable than CORS.
How does it work
A server must have support for JSONP, for example Express allows you to use the Response.jsonp()
method, which is like Response.json()
but handles JSONP callbacks:
res.jsonp({ username: 'Flavio' })
On the client side, you load the endpoint specifying a callback function:
<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>
The callback function must be a global that will receive the JSON data:
const theCallbackFunction = (data) => {
console.log(data)
}
jQuery had a handy way of simplifying this approach by abstracting JSONP in its ajax()
method:
$.ajax({
url: 'http://localhost:2001/api.json',
dataType: 'jsonp',
success: (data) => {
console.log(data)
}
})
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X