解決跨域問題的幾種辦法

一、利用Jsonp

Jsonp是一種利用標籤實現跨域傳輸數據的方法。在ajax跨域請求時，json數據通過回調函數的方式傳遞迴來，從而實現跨域數據傳輸。

    
        function jsonp(url, callback){
            var script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
            window.callback = function(data){
                callback(data);
                document.head.removeChild(script);
            };
        }
        
        jsonp('http://example.com/api/data?callback=callback', function(data){
            console.log(data);
        });
    

二、使用CORS（Cross-Origin Resource Sharing）

CORS是一種跨域資源共享的機制。通過在伺服器端設置Access-Control-Allow-Origin響應頭，來允許特定的源站點訪問指定的資源。

    
        // nodejs express伺服器設置CORS
        const express = require('express');
        const app = express();

        app.use(function(req,res,next){
            res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
            res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
            res.setHeader('Access-Control-Allow-Methods', 'GET');
            next();
        });

        app.get('/api/data', function(req,res){
            res.json({data: 'hello'});
        });
 
        app.listen(3000);
    

三、使用nginx代理

通過在nginx伺服器上配置反向代理伺服器，來實現跨域請求。在nginx上添加一個location項，將請求轉發到目標伺服器，從而達到跨域效果。

    
        // nginx反向代理配置
        server {
            listen 80;
            server_name example.com;
            location /api {
                proxy_pass http://localhost:3000; // 目標伺服器地址
                add_header Access-Control-Allow-Origin http://example.com; // 設置允許跨域的源站點
                add_header Access-Control-Allow-Headers Content-Type; // 設置允許跨域的請求頭
                add_header Access-Control-Allow-Methods GET; // 設置允許跨域的請求方法
            }
        }
    

四、使用iframe

通過在頁面上嵌入一個隱藏的iframe，來進行跨域數據交互。在iframe中載入目標頁面，並將需要傳遞的數據作為url的參數傳遞過去。目標頁面通過讀取url參數，獲取傳遞的數據。

    
        // 發送方頁面
        

        var iframe = document.getElementById('iframe1');
        var data = {name: 'Tom', age: 18};
        iframe.src = 'http://example.com/receiver.html?' + encodeURIComponent(JSON.stringify(data));

        // 接收方頁面
        var data = JSON.parse(decodeURIComponent(window.location.search.substring(1)));
        console.log(data);
    

五、使用WebSocket

WebSocket是一種全雙工通信協議，能夠在不同的域名之間進行數據傳輸。通過在伺服器上部署WebSocket服務端，來實現跨域數據交互。

    
        // 前端WebSocket客戶端
        var socket = new WebSocket('ws://example.com');
        socket.onopen = function(){
            socket.send('Hello WebSocket!');
        };
        socket.onmessage = function(event){
            console.log(event.data);
        };

        // 後端WebSocket服務端
        const WebSocket = require('ws');
        const wss = new WebSocket.Server({port: 8080});
        wss.on('connection', function connection(ws){
            ws.on('message', function incoming(message){
                console.log('received: %s', message);
                ws.send('received');
            });
        });