Cross-Domain Requests JSONP and CORS
In this page:
1. What Is Cross-Domain AJAX?
A cross-domain AJAX request targets a different origin — a different domain, protocol, or port — than the page that made it, and browsers restrict these by default as a security measure. Without the server's cooperation, JavaScript running on one site can't freely read responses from another.
Example: 1. What Is Cross-Domain AJAX?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "https://api.example.com/data",
success: function(data) { console.log(data); },
error: function() { console.log("Blocked by browser CORS restrictions"); }
});
</script>
</body>
</html>2. CORS Basics
CORS (Cross-Origin Resource Sharing) is controlled entirely by the server through HTTP response headers like Access-Control-Allow-Origin; jQuery cannot bypass a browser's CORS restriction on its own. If a request is being blocked, the fix has to happen on the server you're calling, not in your jQuery code.
Example: 2. CORS Basics
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// CORS is controlled by the server's response headers, not by jQuery
$.ajax({
url: "https://api.example.com/data",
success: function(data) { console.log(data); }
});
</script>
</body>
</html>3. JSONP with jQuery
JSONP is an older technique for making cross-domain GET requests that predates CORS, working by loading a script tag instead of a real AJAX request. It only works with servers that specifically support the JSONP response format, and it can't be used for POST requests.
Example: 3. JSONP with jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "https://api.example.com/data",
dataType: "jsonp",
success: function(data) { console.log(data); }
});
</script>
</body>
</html>4. CORS with Credentials
Credentialed CORS requests can send cookies or other credentials along with a cross-origin call, but only when both the client sets withCredentials and the server explicitly allows it via Access-Control-Allow-Credentials. Use this only when the request genuinely needs the user's session, since it loosens a security boundary.
Example: 4. CORS with Credentials
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "https://api.example.com/data",
xhrFields: { withCredentials: true },
success: function(data) { console.log(data); }
});
</script>
</body>
</html>5. CORS vs JSONP
CORS is the modern, standard choice for cross-origin AJAX and supports all HTTP methods, while JSONP is limited to GET requests and only works if the target server built in JSONP support. For any new project, CORS is almost always the right choice over JSONP.
Example: 5. CORS vs JSONP
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// CORS: modern, all HTTP methods. JSONP: legacy, GET only, needs server support
$.ajax({url: "https://api.example.com/data", dataType: "json"});
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: