Cross-Domain Issues and Solutions Explained

Cross-Domain Issues and Solutions Explained

Description: Cross-domain issues are a security restriction caused by the browser's same-origin policy. When a web page's protocol, domain name, or port does not match those of the requested target resource, the browser will block the response data of such cross-domain requests, even if the server successfully responds to the request.

Core Concept: Same-Origin Policy
The same-origin policy requires the following three elements to be exactly the same:

  • Protocol (e.g., http / https)
  • Domain name (e.g., www.example.com)
  • Port (e.g., 80 / 443)

Solutions Explained

1. JSONP (JSON with Padding)

  • Principle: Leverages the fact that <script> tags are not subject to cross-domain restrictions, by dynamically creating script tags to fetch data.
  • Steps:
    1. Frontend defines a global callback function (e.g., handleResponse).
    2. Dynamically creates a <script> tag whose src attribute contains the request URL and callback function name (e.g., ?callback=handleResponse).
    3. After receiving the request, the server passes the data as a parameter to the callback function and returns a script like handleResponse({"data": "value"}).
    4. The browser executes this script, triggering the callback function defined on the frontend.
  • Limitations: Only supports GET requests and has lower security.

2. CORS (Cross-Origin Resource Sharing)

  • Principle: A W3C standard that allows specific cross-origin requests by having the server set specific HTTP response headers.
  • Simple Requests vs. Non-Simple Requests:
    • Simple Request: Meets specific conditions (e.g., GET/POST/HEAD, Content-Type has specific values). The browser automatically adds an Origin header to the request, and the server must return Access-Control-Allow-Origin: * or a specific domain.
    • Non-Simple Request (e.g., PUT/DELETE or custom headers): The browser first sends an OPTIONS preflight request to ask the server if the actual request is allowed. The server must respond with headers like Access-Control-Allow-Methods (allowed methods) and Access-Control-Allow-Headers (allowed header fields). Only after the preflight is successful will the browser send the actual request.
  • Key Headers:
    • Access-Control-Allow-Origin: Allowed origin(s).
    • Access-Control-Allow-Credentials: Whether sending cookies is allowed.
    • Access-Control-Expose-Headers: Response headers accessible to the frontend.

3. Proxy Server

  • Principle: Leverages the fact that there is no same-origin restriction between servers by having a frontend server proxy and forward requests to the target server.
  • Implementation Methods:
    • Development Environment: Use the proxy configuration of webpack-dev-server to forward specific API requests to the backend server.
    • Production Environment: Configure a reverse proxy with Nginx to map cross-domain request paths to the target server.

4. Other Solutions

  • postMessage: Used for cross-window communication (e.g., between an iframe and its parent page), allowing secure data transfer.
  • WebSocket: The protocol itself supports cross-domain communication but requires server support.
  • Modify document.domain: Only applicable for scenarios where the main domain is the same but subdomains differ; both pages must set the same main domain.

Summary: CORS is currently the most mainstream and secure solution. JSONP is suitable for older browsers or simple scenarios, while proxy servers are commonly used in development environments. When choosing a solution, consider browser compatibility and security requirements.