0Pricing
jQuery Academy · Lesson

Cross-Domain AJAX (CORS/JSONP)

Understand and apply techniques for making cross-domain AJAX requests using JSONP or configuring CORS headers on the server for secure data exchange.

Cross-Domain AJAX (CORS/JSONP) is a free jQuery Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Cross-Domain AJAX: The Challenge

When your website tries to fetch data from another website, it's called a cross-domain AJAX request. This is often tricky!

By default, web browsers have a security rule that prevents a webpage from making requests to a different domain than the one it originated from. This rule protects your data.

Understanding Same-Origin Policy

The security rule we just mentioned is called the Same-Origin Policy (SOP). It's a fundamental browser security feature.

SOP dictates that a web browser permits scripts contained in a first web page to access data in a second web page only if both web pages have the same origin (domain, protocol, and port).

  • Example: A page from mywebsite.com cannot fetch data from api.anotherdomain.com directly.

CORS: A Modern Solution

To safely allow cross-domain requests, the web community developed Cross-Origin Resource Sharing (CORS). It's the modern, standard way to handle this.

CORS works by allowing the server to explicitly tell the browser that it's okay for certain other domains to access its resources.

CORS: Server-Side Configuration

CORS is primarily configured on the server providing the data. The server sends special HTTP headers in its response to indicate which origins are permitted.

The key header is Access-Control-Allow-Origin. It specifies which domains can access the resource.

  • Access-Control-Allow-Origin: * (allows any domain)
  • Access-Control-Allow-Origin: https://yourdomain.com (allows only a specific domain)

CORS: jQuery Client Requests

From the client side (using jQuery), making a CORS request is often no different than a regular AJAX request, provided the server is correctly configured.

jQuery handles the browser-level communication. You just point your $.ajax() call to the cross-domain URL.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: Preflight Requests (OPTIONS)

For certain "complex" CORS requests, browsers perform a preflight request before sending the actual request. This is an extra security step.

A preflight request uses the OPTIONS HTTP method to ask the server for permission. If the server grants it, the browser then sends the actual request (e.g., PUT, DELETE, or requests with custom headers).

JSONP: An Older Alternative

Before CORS was widely adopted, JSONP (JSON with Padding) was a common workaround for cross-domain requests, especially for older browsers or APIs.

JSONP bypasses the Same-Origin Policy by creatively using the browser's allowance for loading <script> tags from any domain.

JSONP: The Mechanism

Here's how JSONP works:

  • You dynamically create a <script> tag and set its src to the cross-domain URL.
  • The server, expecting a JSONP request, wraps its JSON data in a function call (the 'padding').
  • The browser executes this script, calling a globally defined function in your page with the data as an argument.

JSONP: jQuery Implementation

jQuery simplifies JSONP implementation significantly. You just need to specify dataType: "jsonp" in your $.ajax() call.

jQuery automatically handles creating the dynamic <script> tag, generating a unique callback function name, and executing it when the response arrives.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS vs. JSONP: Key Differences

While both address cross-domain issues, CORS and JSONP have distinct characteristics:

  • CORS: Modern standard, uses HTTP headers, secure, supports all HTTP methods, server-side configuration required.
  • JSONP: Older workaround, uses <script> tags, less secure, GET requests only, client-side technique, requires server to wrap response.

Quick Check: Cross-Domain

Which of the following statements are TRUE regarding cross-domain AJAX requests?

Recap: Cross-Domain Mastery

You've learned how to overcome the Same-Origin Policy for cross-domain AJAX requests!

  • CORS is the modern, secure standard, relying on server-side HTTP headers for permission.
  • JSONP is an older, less secure workaround for GET requests, using dynamic <script> tags.

Always prefer CORS when possible, as it's more secure and flexible. JSONP is mainly for legacy systems or specific scenarios.

Frequently asked questions

Is the “Cross-Domain AJAX (CORS/JSONP)” lesson free?

Yes — the full text of “Cross-Domain AJAX (CORS/JSONP)” is free to read here on the web, and the jQuery Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.

What will I learn in “Cross-Domain AJAX (CORS/JSONP)”?

Understand and apply techniques for making cross-domain AJAX requests using JSONP or configuring CORS headers on the server for secure data exchange. You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start jQuery Academy?

No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Cross-Domain AJAX (CORS/JSONP)” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this jQuery Academy lesson?

Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Configuring AJAX Requests Effectively
  2. Handling AJAX Errors and Success
  3. Cross-Domain AJAX (CORS/JSONP)
← Back to jQuery Academy