前端怎麼解決跨域問題

前端跨域問題的解決方案通常涉及幾種不同的方法，每種方法都有其特定的應用場景和優缺點。以下是一些常見的前端跨域解決方案：

1. JSONP（JSON with Padding）
   • 原理：利用<script>標簽沒有跨域限制的特性，通過動態創建<script>標簽並設置其src屬性為跨域請求的URL，來實現跨域數據獲取。
   • 實現方式：在前端定義一個回調函數，然後在跨域請求URL的末尾添加這個回調函數的名稱作為參數。伺服器端在返回數據時，會將數據作為這個回調函數的參數返回。前端接收到數據後，會執行這個回調函數，從而獲取到數據。
   • 缺點：只能支持GET請求，存在安全風險（如XSS攻擊），且不能發送自定義的HTTP頭。
2. CORS（Cross-Origin Resource Sharing）
   • 原理：一種由W3C規範定義的跨域資源共用機制，它允許網頁上的JavaScript代碼向其他源（功能變數名稱、協議、埠任一不同）的伺服器發出請求，並獲取數據。
   • 實現方式：在後端伺服器設置響應頭（如Access-Control-Allow-Origin），允許指定的源進行跨域訪問。前端代碼無需修改，直接使用標準的AJAX或Fetch API發起請求即可。
   • 優點：支持所有類型的HTTP請求，包括GET、POST、PUT、DELETE等，且可以發送自定義的HTTP頭。
3. 代理伺服器
   • 原理：通過在前端和後端之間設置一個代理伺服器，將前端發起的跨域請求轉發給後端伺服器，然後將後端伺服器的響應轉發給前端。由於代理伺服器和前端、後端都是同源的，因此可以規避瀏覽器的同源策略限制。
   • 實現方式：常見的代理伺服器軟體有Nginx、Node.js等。可以在這些軟體中配置代理規則，將前端發起的跨域請求轉發到指定的後端伺服器。
   • 優點：靈活性強，可以自定義代理規則，支持所有類型的HTTP請求和自定義HTTP頭。
4. 其他解決方案
   • document.domain + iframe：僅限主域相同、子域不同的應用場景。通過設置document.domain為基礎主域，可以實現同域，從而互相操作資源。
   • location.hash + iframe：父頁面改變iframe的src屬性，location.hash的值改變，不會刷新頁面。在子頁面可以通過window.location.hash獲取到父頁面傳遞的數據。

在實際開發中，應根據具體的業務需求和場景選擇合適的跨域解決方案。例如，如果只需要支持GET請求且對安全性要求不高，可以選擇JSONP；如果需要支持所有類型的HTTP請求且需要發送自定義的HTTP頭，可以選擇CORS；如果需要更靈活的配置和自定義規則，可以選擇代理伺服器。

當然，我會為每種解決方案提供一個簡單的示例代碼。

1. JSONP

前端代碼（使用 jQuery 的 $.ajax 方法作為示例）：

function fetchDataJsonp(url, callbackParam, callbackFunction) {  
    var script = document.createElement('script');  
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + callbackParam + '=' + callbackFunction.name;  
    document.body.appendChild(script);  
}  
  
function handleData(data) {  
    console.log(data);  
}  
  
// 假設後端服務返回類似 `handleData({"name": "John", "age": 30});`  
fetchDataJsonp('https://example.com/api/data', 'callback', handleData);

註意：JSONP 需要後端服務支持特定的回調函數格式。

2. CORS

前端代碼（使用原生的 fetch API）：

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

後端需要設置 CORS 相關的響應頭，例如：

Access-Control-Allow-Origin: *  
Access-Control-Allow-Methods: GET, POST, OPTIONS  
Access-Control-Allow-Headers: Content-Type

註意：* 表示允許所有源訪問，但在生產環境中，為了安全起見，應該只允許特定的源。

3. 代理伺服器（使用 Node.js 的 Express 作為示例）

前端代碼（與 CORS 示例相同，因為請求是通過代理伺服器發送的，所以前端代碼不需要更改）：

fetch('https://example.com/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) => {  
    request({  
        url: 'https://example.com/api' + req.url,  
        method: req.method,  
        headers: req.headers,  
        body: req.body  
    }).pipe(res);  
});  
  
app.listen(3000, () => {  
    console.log('Proxy server listening on port 3000');  
});

註意：上面的代理伺服器示例使用了 request 庫來轉發請求，但在新的 Node.js 版本中，你可能需要使用 axios、node-fetch 或其他庫來替代 request，因為 request 庫已經廢棄。

本文來自博客園，作者：喆星高照，轉載請註明原文鏈接：https://www.cnblogs.com/houxianzhou/p/18233381