Mastering AJAX Cross‑Domain: From CORS to JSONP and Proxy Solutions

Preface

Since I first started front‑end development, the term “cross‑origin” has appeared frequently; I have debugged many cross‑origin issues, and after a 2016 article I felt something was missing, so I reorganized the material. My knowledge is limited; please forgive any errors and feel free to raise issues.

Outline

What is AJAX cross‑domain

Principle

Symptoms and solutions

How to solve AJAX cross‑domain

JSONP

CORS

Proxy request

How to analyze AJAX cross‑domain

HTTP packet analysis

Examples

What is AJAX cross‑domain

AJAX cross‑domain occurs when a browser‑based XMLHttpRequest violates the same‑origin policy. The underlying same‑origin policy is explained in Ruanyifeng’s article (link omitted).

CORS request principle

CORS (Cross‑Origin Resource Sharing) is a W3C standard that allows browsers to make XMLHttpRequest calls to a different origin by adding appropriate response headers such as Access-Control-Allow-Origin. Modern browsers implement the CORS standard, so most AJAX requests are based on it.

How to judge a simple request?

A request is considered “simple” if it meets both conditions: (1) the HTTP method is HEAD, GET, or POST; (2) the request headers are limited to Accept, Accept-Language, Content-Language, Last-Event-ID, and Content-Type with values application/x-www-form-urlencoded, multipart/form-data, or text/plain. Otherwise it is a “non‑simple” request.

AJAX cross‑domain manifestations

Typical error messages include:

No ‘Access-Control-Allow-Origin’ header and HTTP 404.

No ‘Access-Control-Allow-Origin’ header and HTTP 405 (OPTIONS request not allowed).

No ‘Access-Control-Allow-Origin’ header and HTTP 200 (header mismatch).

Multiple ‘Access-Control-Allow-Origin: *’ headers (duplicate configuration).

Solutions correspond to each case: enable OPTIONS on the server, adjust security configurations, add missing headers, or remove duplicate origin settings.

How to solve AJAX cross‑domain

JSONP method

JSONP uses a <script> tag to fetch JSON data, bypassing the same‑origin restriction. It works only with GET requests and is now largely deprecated.

Implementation steps:

Client adds a <script> element whose src points to the server endpoint.

Server wraps the JSON payload in a callback function.

Browser executes the script, invoking the callback with the data.

CORS method

Backend must add appropriate CORS headers. Example configurations:

PHP

Set header('Access-Control-Allow-Origin: *'); and related headers.

Node.js (Express)

Use the cors middleware or manually set headers.

Java

Add cors-filter JAR, configure in web.xml as the first filter.

.NET

Modify web.config to include Access-Control-Allow-Origin and related headers, ensuring only one * entry.

Proxy request method

During development, a local proxy can forward AJAX requests to the target server, avoiding CORS altogether. Typically implemented with Node.js.

How to analyze AJAX cross‑domain

Use Chrome DevTools: open the page, press F12, go to the Network tab, filter XHR, inspect request and response headers. Identify missing or mismatched CORS headers, OPTIONS handling, or other issues.

Examples of correct and erroneous requests are illustrated with screenshots.

Conclusion

Cross‑origin problems are common, but by understanding the same‑origin policy, CORS, JSONP, and proxy techniques, and by using systematic debugging, front‑end developers can effectively resolve them.