超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

1. 什么是跨域？

跨域（Cross-Origin）是指瀏覽器出于安全考慮，限制不同源（協(xié)議、域名、端口）之間的資源交互。

同源策略（Same-Origin Policy） 要求以下三者必須一致：

• 協(xié)議（HTTP/HTTPS）

• 域名（如 example.com 與 api.example.com 不同源）

• 端口（如 80 與 8080 不同源）

2. 跨域的表現(xiàn)形式

當(dāng)以下場景發(fā)生在不同源時，瀏覽器會攔截請求：

• AJAX/Fetch 請求

• WebSocket 連接

• 頁面中嵌入第三方資源（如 <iframe>、字體、腳本）

3. 常見跨域解決方案

3.1 CORS（跨域資源共享）

原理：服務(wù)端通過響應(yīng)頭聲明允許的跨域請求來源。

實現(xiàn)步驟：

1. 1.簡單請求（GET/POST/HEAD，Content-Type 為 text/plain、multipart/form-data、application/x-www-form-urlencoded）：
   服務(wù)端返回 Access-Control-Allow-Origin: * 或具體域名。

2. 2.預(yù)檢請求（復(fù)雜請求如 PUT/DELETE 或自定義頭）：
   瀏覽器先發(fā)送 OPTIONS 請求，服務(wù)端需響應(yīng)：

   Access-Control-Allow-Origin: https://your-domain.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: Content-Type, Authorization

示例代碼（Node.js Express）：

app.use((req, res, next) => {  res.header("Access-Control-Allow-Origin", "https://your-client.com");  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");  if (req.method === "OPTIONS") {    return res.sendStatus(200); // 快速返回預(yù)檢請求響應(yīng)  }  next();});

3.2 JSONP（JSON with Padding）

原理：利用 <script> 標(biāo)簽無跨域限制的特性，通過回調(diào)函數(shù)獲取數(shù)據(jù)。

缺點：僅支持 GET 請求，存在安全風(fēng)險（如 XSS）。

示例代碼：

// 前端function handleResponse(data) {  console.log("Received:", data);}const script = document.createElement('script');script.src = 'https://api.example.com/data?callback=handleResponse';document.body.appendChild(script);
// 服務(wù)端返回handleResponse({ "status": "success", "data": [...] });

3.3 代理服務(wù)器

原理：通過同源的后端服務(wù)轉(zhuǎn)發(fā)請求，繞過瀏覽器限制。

實現(xiàn)方式：

• Nginx 反向代理

location /api/ {  proxy_pass https://api.example.com/;  proxy_set_header Host $host;}

開發(fā)環(huán)境代理（如 webpack-dev-server）

1. // vue.config.js / webpack.config.jsmodule.exports = {  devServer: {    proxy: {      '/api': {        target: 'https://api.example.com',        changeOrigin: true,      }    }  }};

   3.4 WebSocket

   原理：WebSocket 協(xié)議不受同源策略限制。
   ?示例代碼：

1. const socket = new WebSocket('wss://api.example.com/socket');socket.onmessage = (event) => {  console.log('Message:', event.data);};

   3.5 其他方案

   • 修改 document.domain
     僅適用于主域相同、子域不同的場景（需同時設(shè)置父頁面和子頁面）：

   document.domain = "example.com"; // 父頁面和子頁面均需設(shè)置        

postMessage API

用于窗口間通信（如 <iframe> 與父頁面）：

// 發(fā)送方window.parent.postMessage('Hello', 'https://parent-domain.com');
// 接收方window.addEventListener('message', (event) => {  if (event.origin !== 'https://child-domain.com') return;  console.log('Received:', event.data);});

4. 調(diào)試與注意事項

• 瀏覽器控制臺報錯：如 CORS policy 錯誤提示。

• 攜帶憑證（Credentials）：
  若請求需要 Cookies 或認證頭，需設(shè)置：

// 前端fetch(url, { credentials: 'include' });
// 服務(wù)端res.header("Access-Control-Allow-Credentials", "true");res.header("Access-Control-Allow-Origin", "https://your-client.com"); // 不能為通配符 *

• 安全性：避免濫用 Access-Control-Allow-Origin: *，防止 CSRF 攻擊。

?

5. 總結(jié)

• 推薦方案：優(yōu)先使用 CORS 或代理服務(wù)器。

• 兼容性場景：JSONP 適用于老舊系統(tǒng)。

• 實時通信：WebSocket 是理想選擇。

通過理解跨域機制及解決方案，開發(fā)者可靈活應(yīng)對不同場景的跨域需求。