什么是跨域？——詳解跨域問題及其解決方案

引言
什么是跨域
同源策略
跨域的產生原因
跨域的常見解決方案
- JSONP
- CORS
- 代理服務器
- nginx反向代理
- 后端設置允許跨域
CORS的詳細實現
- 瀏覽器中的CORS支持
- 服務器端的CORS配置
常見的跨域場景和解決方案
- 跨域請求API
- 跨域加載資源
跨域的安全性考慮
跨域調試技巧
總結

引言

在現代Web開發中，前后端分離的架構設計已成為常態。然而，當前端向不同域名的后端服務器請求數據時，常會遇到跨域問題。理解并解決跨域問題，不僅能保證數據的正常交互，還能提升用戶體驗和應用的安全性。

什么是跨域

跨域（Cross-Origin）指的是瀏覽器阻止前端網頁從一個域名（Origin）向另一個域名的服務器發送請求。具體來說，一個頁面的協議、域名、端口三者任意一個與請求的目標地址不同，就被視為跨域請求。

舉例說明：

http://example.com 請求 http://api.example.com 會跨域，因為域名不同。
http://example.com 請求 https://example.com 會跨域，因為協議不同。
http://example.com:8080 請求 http://example.com:9090 會跨域，因為端口不同。

同源策略

同源策略（Same-Origin Policy）是瀏覽器的一個重要安全機制，防止惡意網站通過跨域方式竊取敏感數據。該策略限制了從一個源加載的文檔或腳本如何與另一個源的資源進行交互。

同源策略的定義：如果兩個URL的協議、域名和端口都相同，則這兩個URL具有相同的源。

同源策略的影響

同源策略影響以下幾類數據訪問：

Cookie、LocalStorage 和 IndexedDB
DOM 和 JavaScript 對象
AJAX 請求

跨域的產生原因

跨域問題主要是由于瀏覽器的同源策略所致。隨著前后端分離架構的流行，前端開發常常需要向不同域名的后端服務器請求數據，從而產生跨域問題。

跨域的常見解決方案

JSONP

JSONP（JSON with Padding）是一種傳統的跨域解決方案，通過動態創建<script>標簽來實現跨域請求，因為<script>標簽不受同源策略的限制。

實現原理

JSONP通過在URL中傳遞回調函數的名稱，后端返回對應的JavaScript代碼，前端執行該代碼，從而實現數據的獲取。

示例代碼

前端代碼：

<!DOCTYPE html>
<html>
<head><title>JSONP Demo</title>
</head>
<body><script>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);</script>
</body>
</html>

后端代碼（假設為Node.js）：

const http = require('http');http.createServer((req, res) => {const callbackName = req.url.match(/callback=([^&]+)/)[1];const responseData = { message: 'Hello, world!' };res.writeHead(200, { 'Content-Type': 'application/javascript' });res.end(`${callbackName}(${JSON.stringify(responseData)})`);
}).listen(80, 'example.com');

CORS

CORS（Cross-Origin Resource Sharing）是現代解決跨域問題的標準方法，通過HTTP頭來告訴瀏覽器，允許哪些跨域請求。

實現原理

CORS通過設置HTTP響應頭Access-Control-Allow-Origin，告訴瀏覽器哪些域名可以訪問資源。

示例代碼

前端代碼：

fetch('http://api.example.com/data', {method: 'GET',headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端代碼（假設為Node.js和Express）：

const express = require('express');
const app = express();app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');next();
});app.get('/data', (req, res) => {res.json({ message: 'Hello, world!' });
});app.listen(80, 'example.com');

代理服務器

代理服務器可以繞過瀏覽器的同源策略，將跨域請求轉發到目標服務器。

示例代碼

前端代碼：

fetch('/api/data', {method: 'GET',headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端代碼（假設為Node.js和Express）：

const express = require('express');
const request = require('request');
const app = express();app.use('/api', (req, res) => {const url = 'http://api.example.com' + req.url;req.pipe(request(url)).pipe(res);
});app.listen(3000, () => {console.log('Proxy server running on port 3000');
});

nginx反向代理

通過配置nginx反向代理，也可以實現跨域請求。

配置示例

server {listen 80;location /api/ {proxy_pass http://api.example.com/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

后端設置允許跨域

通過在后端設置CORS響應頭，允許特定域名訪問資源。

示例代碼

后端代碼（假設為Spring Boot）：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://example.com").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true);}};}
}

CORS的詳細實現

瀏覽器中的CORS支持

CORS在瀏覽器中的實現是通過在請求和響應中添加相應的HTTP頭部字段來完成的。常見的CORS相關頭部字段包括：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Expose-Headers

服務器端的CORS配置

不同的后端框架和服務器有不同的CORS配置方法。以下是一些常見的配置示例。

Node.js和Express

const express = require('express');
const cors = require('cors');
const app = express();app.use(cors());app.get('/data', (req, res) => {res.json({ message: 'Hello, world!' });
});app.listen(80, () => {console.log('Server running on port 80');
});

Spring Boot

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://example.com").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true);}};}
}