如何解決跨域問題

一、跨域怎麼解決前端

前端跨域問題可能是最為常見的跨域問題，多見於移動端APP或者瀏覽器中使用AJAX異步請求數據的過程中。

1、JSONP

    
        <script>
            function jsonpCallback(data) {
                console.log(data);
            }
        </script>
        <script src="http://example.com/data?callback=jsonpCallback"></script>
    

2、CORS

    
        xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.open('GET', 'http://example.com/data');
        xhr.send();
    

3、postMessage

    
        // 在發送請求時跨頁面傳遞一個message對象
        targetWindow.postMessage(message, targetOrigin);
        
        // 在接收到請求時用監聽message事件處理跨域的信息
        window.addEventListener('message', function(event) {
            if (event.origin !== 'http://example.com') {
                return;
            }
            console.log(event.data);
        });
    

二、跨域漏洞怎麼解決

跨域漏洞的種類和解決方法非常多，因此本文不做詳細的介紹，這裡提供幾個比較常見的跨域漏洞和解決方案。

1、CSRF攻擊

解決方案：使用token驗證用戶身份、在請求中添加Referer頭等

2、XSS攻擊

解決方案：對用戶輸入的內容進行HTML轉義、使用DOMPurify對插入DOM的內容進行過濾等

3、點擊劫持

解決方案：使用X-Frame-Options等HTTP響應頭禁止IFrame、使用framekiller.js腳本等

三、跨域怎麼解決改屬性

如果是跨域改屬性，可以使用HTML5新增的postMessage跨域通信API，使用這個API可以在兩個窗口之間通信並傳遞數據。

    
        // 父頁面中的代碼
        var childWindow = window.open('http://example.com', 'example');
        childWindow.postMessage(data, 'http://example.com');
        
        // 彈出窗口中的代碼
        window.addEventListener('message', function(event) {
            if (event.origin !== 'http://example.com') {
                return;
            }
            console.log(event.data);
            // 接受到數據後在彈出窗口中改屬性
        });
    

四、上線後怎麼解決跨域問題

在上線後開啟CORS策略解決跨域問題。前端使用XMLHttpRequest或fetch發送請求，服務端在響應頭設置Access-Control-Allow-Origin等相關字段即可。

    
        // express.js示例
        app.use(function(req, res, next) {
            // 設置響應頭
            res.header('Access-Control-Allow-Origin', '*');
            res.header('Access-Control-Allow-Headers', 'Content-Type');
            res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
            next();
        });
    

五、跨域怎麼解決么

除了前端方面可以使用JSONP、CORS、postMessage等方式解決跨域問題外，後端也可以使用代理、正向代理、反向代理、中間件等方式解決跨域問題。

1、代理

本地搭建一個代理服務器，後端和前端都通過這個代理服務器進行數據請求和響應。

2、正向代理

客戶端請求由代理服務器轉發至目標服務器，一般用於內網向外網請求數據。

3、反向代理

客戶端請求由目標服務器轉發至代理服務器，代理服務器返回目標服務器響應的數據，用於負載均衡和緩存靜態資源等。

4、中間件

使用類似Nginx這樣的開源中間件軟件，通過配置實現轉發和反向代理等功能。

六、跨域怎麼解決restful協議規範

使用REST風格的API時，一般使用HTTP請求方式+URI來確定請求的資源，但是在跨域的情況下，會出現OPTIONS預檢請求導致跨域問題。

解決方案：在服務器中增加OPTIONS路由，對OPTIONS請求返回對應的響應頭即可。

    
        app.options('/*', function (req, res, next) {
            res.header('Access-Control-Allow-Origin', '*');
            res.header('Access-Control-Allow-Headers', '');
            res.header('Access-Control-Allow-Methods', '');
            res.header('Content-Type', 'text/plain');
            res.status(200).send();
        });
    

七、瀏覽器跨域問題怎麼解決

瀏覽器一般採用同源策略來控制JavaScript腳本的訪問權限，但是可能會出現一些針對瀏覽器的跨域攻擊，例如XSS、Clickjacking等。

解決方案：

1、同源策略

瀏覽器同源策略可以禁止外域網頁讀取當前頁面的 Cookie、localStorage 和 IndexDB 等敏感信息。

2、X-Frame-Options

服務器響應 HTTP 頭信息的字段，告訴瀏覽器在當前頁面內嵌入其他網站時是否允許 iframe，從而防止Clickjacking攻擊。

    
        X-Frame-Options: DENY
    

八、axios跨域怎麼解決

axios是一個常見的前端請求庫，使用axios請求數據時遇到跨域問題可以進行以下設置：

    
        axios.defaults.baseURL = 'http://example.com';
        axios.defaults.withCredentials = true; // 開啟COOKIE驗證
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

設置axios.defaults.baseURL為請求URL的前綴

設置axios.defaults.withCredentials為true開啟前端的COOKIE驗證

設置axios.defaults.headers.post[‘Content-Type’]為請求數據類型

九、圖片跨域怎麼解決

圖片跨域問題指的是使用img標籤加載來自不同域的圖片時，可能會出現跨域問題。

解決方案：

1、CORS

在圖片所在的服務器中應該加上Access-Control-Allow-Origin響應頭，避免瀏覽器拒絕跨域請求。

2、使用canvas

生成一個canvas對象後，在canvas的畫布上使用drawImage方法繪製圖片即可。

    
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.crossOrigin = 'Anonymous'; // 允許跨域訪問
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            var dataURL = canvas.toDataURL('image/png');
            console.log(dataURL);
        };
        img.src = 'http://example.com/img.jpg';
    

十、服務器跨域怎麼解決

服務器端的跨域問題主要存在於HTTP請求上，可以使用網關進行代理或者轉發。

解決方案：

1、使用反向代理

在服務器中運行一個中間件軟件，將所有請求路由到反向代理，由反向代理再將請求分發到相應的服務器。

2、使用網關

使用網關轉發請求和接收響應，網關在轉發請求時添加一些請求頭信息以避免跨域問題。

    
        const httpProxy = require('http-proxy');
        const proxyServer = httpProxy.createServer({
            target: 'http://example.com:8080' // 目標服務器
        });
        proxyServer.listen(80); // 監聽端口