Cross-domain processing solutions

The Essence of Cross-Origin Issues

Cross-origin problems stem from the browser's same-origin policy restrictions. The same-origin policy requires that the protocol, domain, and port be identical for unrestricted communication. Requests from different origins are blocked by the browser, preventing the frontend from accessing response data. Common cross-origin scenarios include frontend-backend separation development, calling third-party APIs, and different subdomains.

JSONP Solution

JSONP leverages the fact that <script> tags are not restricted by the same-origin policy to achieve cross-origin requests. The client defines a callback function, and the server returns JavaScript code that calls this function.

// Client-side code
function handleResponse(data) {
  console.log('Received data:', data);
}

const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

// Server response
handleResponse({data: "some data"});

Disadvantages:

• Only supports GET requests
• Poor security
• Difficult error handling

CORS Solution

CORS (Cross-Origin Resource Sharing) is a standardized cross-origin solution supported by modern browsers. The server declares allowed cross-origin requests by setting response headers.

Simple Requests

A request is considered simple if it meets the following conditions:

• Method is GET, HEAD, or POST
• Content-Type is text/plain, multipart/form-data, or application/x-www-form-urlencoded

// Server settings
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://client-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

Preflight Requests

Requests that do not meet the simple request conditions first send an OPTIONS preflight request.

// Server handling preflight requests
app.options('/api', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://client-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.status(204).end();
});

Credentialed Requests

Additional Access-Control-Allow-Credentials header is required:

// Client-side
fetch('http://api.example.com', {
  credentials: 'include'
});

// Server
res.setHeader('Access-Control-Allow-Credentials', 'true');

Proxy Server Solution

Requests are forwarded through a same-origin backend server to bypass browser restrictions. Node.js implementation example:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
  target: 'http://target-server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}));

app.listen(3000);

WebSocket Cross-Origin

The WebSocket protocol is not restricted by the same-origin policy, but the server must explicitly allow cross-origin connections:

// Client-side
const socket = new WebSocket('ws://server.example.com');

// Node.js server
const WebSocket = require('ws');
const wss = new WebSocket.Server({
  port: 8080,
  verifyClient: (info, done) => {
    // Verify origin
    done(info.origin === 'http://allowed-client.com');
  }
});

postMessage Cross-Origin

Suitable for communication between iframes/windows:

// Sender
window.parent.postMessage('message content', 'http://target-origin.com');

// Receiver
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://trusted-origin.com') return;
  console.log('Received message:', event.data);
});

Nginx Reverse Proxy

Request forwarding via Nginx configuration:

server {
    listen 80;
    server_name localhost;

    location /api/ {
        proxy_pass http://backend-server/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Practical Applications of Cross-Origin Resource Sharing

Handling Complex CORS Scenarios

// Express middleware
const corsOptions = {
  origin: (origin, callback) => {
    const allowedOrigins = ['https://domain1.com', 'https://domain2.com'];
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['X-Custom-Header'],
  credentials: true,
  maxAge: 86400
};

app.use(cors(corsOptions));

Handling Preflight Request Caching

app.options('*', cors(corsOptions)); // Global preflight request handling

Security Considerations

1. Strictly limit Access-Control-Allow-Origin; avoid using *
2. Implement CSRF protection for sensitive operations
3. Validate the Origin header for all cross-origin requests
4. Restrict allowed HTTP methods and headers

// Security example
app.use((req, res, next) => {
  const allowedOrigins = new Set([
    'https://www.myapp.com',
    'https://api.myapp.com'
  ]);
  
  const origin = req.headers.origin;
  if (allowedOrigins.has(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Vary', 'Origin');
  }
  
  // Other security headers
  res.setHeader('X-Content-Type-Options', 'nosniff');
  next();
});

Performance Optimization Strategies

1. Preflight request caching: Set Access-Control-Max-Age
2. Reduce unnecessary preflight requests: Use simple requests whenever possible
3. CDN acceleration for cross-origin resources
4. Compress cross-origin response data

// Set preflight request caching
app.use((req, res, next) => {
  res.setHeader('Access-Control-Max-Age', '600');
  next();
});

Common Issue Troubleshooting

1. Check if response headers are correctly set
2. Confirm if the request meets simple request conditions
3. Verify if the server correctly handles the OPTIONS method
4. Check browser console error messages
5. Use curl to test API response headers

# Test using curl
curl -I -X OPTIONS http://api.example.com/resource