從iframe連接時發生socket.io錯誤

Question

因此，我有幾個應用程序在不同的服務器上，都來自我們的網絡內部，我使用node.js和socket.io js來處理它們之間的實時通信，單獨工作正常，但是當我把應用程序2放在應用程序1的iframe中時，出現以下錯誤 「阻止了一個源地址爲」http：// 192.128.1.97「的幀訪問源於」http：// intranet「 。協議，域和端口必須匹配。「 * note我在上面的url中添加了空格，因爲頁面告訴我鏈接不被允許。

有沒有辦法讓iframe連接到socket.io？該代碼是相當簡單的，但這裏是服務器端的代碼...

/** 
* Server js file for node 
* this will handle all of the incoming requests from all the apps 
* and push them to the clients 
*/ 

var express = require("express"), 
    app = express(), 
    http = require("http").createServer(app), 
    io = require("socket.io").listen(http); 
    _ = require("underscore"); 

var participants = []; 

// setup the environment and tell node and express what it needs 
app.set("ipaddr", "192.168.1.76"); 
app.set("port", 8080); 
app.set("views", __dirname + "/views"); 
app.set("view engine", "jade"); 

//further environment setup telling node and express what to use to handle requests 
app.use(express.static("public", __dirname)); 
app.use(express.bodyParser()); 

//setup the default page 
app.get("/", function(request, response) { 
    //render the view page 
    //response.render("node_home"); 
    //just post a message to the screen 
    response.send("Server is up and running"); 
    //respond with a json object 
// reponse.json(200, {message: "Server is up and running"}); 
}); 

//setup a handler for requests to /message 
app.post("/message", function(request, response) { 
    var message = request.body.message; 
    if(_.isUndefined(message) || _.isEmpty(message.trin())) { 
     return response.json(400, {error: "Message is invalid"}); 
    } 

    var name = request.body.name; 
    io.sockets.emit("incomingMessage", {message: message, name: name}); 
    response.json(200, {message: "Message received"}); 
}) 

io.on("connection", function(socket) { 
    socket.on("newUser", function(data) { 
     participants.push({id: data.id, name: data.name}); 
     io.sockets.emit("newConnection", {participants: participants, badgeNumber: data.badgeNumber, id: data.id}) 
    }); 
    socket.on("nameChange", function(data) { 
     _findWhere(paticipants, {id: socket.id}).name = data.name; 
     io.sockets.emit("nameChanged", {id: data.id, name: data.name}) 
    }); 
    socket.on("disconnect", function() { 
     participants = _.without(participants, _.findWhere(participants, {id: socket.id})); 
     io.sockets.emit("userDisconnected", {id: socket.id, sender: "system"}) 
    }); 
    socket.on("phraseCheck", function(data) { 
     io.sockets.emit("checkPhrase", {id: data.id, phrase: data.phrase}); 
    }); 
    socket.on('newFluxClient', function(data) { 
    console.log(data); 
     io.sockets.emit('fluxConnection', {badgeNumber: data.badgeNumber, id: data.id}); 
    }); 
    socket.on('phraseAllowed', function(data) { 
     io.sockets.emit('allowedPhrase', {id: data.id, allowed: data.allowed}); 
    }); 
    socket.on('customFunction', function(data) { 
     console.log(data); 
    io.sockets.emit('customFunction', data); 
    }); 
}); 


//start the app and have it listen for incoming requests 
http.listen(app.get("port"), app.get("ipaddr"), function() { 
    console.log("Server up and running. Go to http://" + app.get("ipaddr") + ":" + app.get("port")) 
}); 

申請代碼1 ....

/** 
* client js file 
* this will handle connecting to node and handle the incoming messages 
* as well as sending responses and messages to the server 
*/ 
var childSessionId = '', 
sessionId = '', 
socket = '', 
serverBaseUrl = '', 
participants = []; 

function init() { 
serverBaseUrl = 'http://192.168.1.76:8080'; 

socket = io.connect(serverBaseUrl); 

sessionId = ''; 
function updateParticipants(part) { 
    participants = part; 
    $("#participants").html(''); 
    for(var i=0; i<participants.length;i++) { 
     $("#participants").append('<span id="' + participants[i].id + '">' + participants[i].name + ' ' + (participants[i].id === sessionId ? '(You)' : '') + '<br /></span>'); 
    } 
} 
socket.on('connect', function() { 
    sessionId = socket.socket.sessionid; 
    console.log('Connected ' + sessionId); 
    socket.emit("newUser", {id: sessionId, name: page.user}); 
}); 
socket.on('userDisconnect', function(data) { 
    $('#' + data.id).remove(); 
}); 
socket.on('nameChanged', function(data) { 
    $('#' + data.id).html(data.name + ' ' + (data.id === sessionId ? '(You)' : '') + '<br />'); 
}); 
socket.on('newConnection', function(data) { 
    if(data.badgeNumber === page.userBadgeNumber) { 
     childSessionId = data.id; 
    } 
    updateParticipants(data.participants); 
}); 
socket.on('fluxConnection', function(data) { 
    console.log('flux connection data:'); 
    console.log(data); 
    if(data.badgeNumber === "**********") { 
     childSessionId = data.id; 
    } 
}); 
socket.on('incomingMessage', function(data) { 
    $("#messages").prepend('<b>' + data.name + '</b><br />' + data.message + '<hr />'); 
}); 
socket.on('error', function(reason) { 
    console.log('Unable to connect to server', reason); 
}); 
socket.on('customFunction', function(data) { 
    console.log(data); 

     data.data(); 

}); 
socket.on('checkPhrase', function(data) { 
    if(data.id === childSessionId) { 
     var phrases = shoppingcart.getPhrasesInCart(); 
     var allowed = ($.inArray(data.phrase, phrases) >= 0); 
     socket.emit('phraseAllowed', {id: data.id, allowed: allowed}); 
    } 
}); 

} 
$(document).ready(function() { 
    init(); 
}) 

和應用2碼....

// NODE JS INITIALIZATION 
var socket = null; 
var sessionId = ''; 
function initialize_node(){ 

var serverBaseUrl = 'http://192.168.1.76:8080'; 

socket = io.connect(serverBaseUrl); 
sessionId = ''; 

socket.on('connect', function() { 
    sessionId = socket.socket.sessionId; 
    socket.emit('newFluxClient', {id: sessionId, badgeNumber: "PDX000022", name: "matthew.hicks"}); 
//  socket.emit('newUser', {id: sessionId, badgeNumber: user.badge, name: user.name}); 
}) 

socket.on('allowedPhrase', function(data) { 
    if(sessionId === data.id) { 
     alert("I'm a preddy little princess. Console logging data returned"); 
     console.log(data); 
     /* 
     functions to allow or disallow the phrase 
     based on data.allowed 
     it will be true if the phrase is in the shopping cart 
     and false if it is not 
     */ 
    } 
}); 

// $('#phrase').blur(function() { 
//  checkPhrase(); 
// }) 
}; 

function checkPhrase() { 
//var phrase = $('#phrase').val(); 
var phrase = "Shindigs in Ptown"; 
socket.emit('phraseCheck', {id: sessionId, phrase: phrase}); 
} 


$(document).ready(function() { 
initialize_node(); 
}); 

抱歉代碼量很大，但試圖給出所有必要的文字。本質上，服務器已啓動並正在運行，應用程序1連接並獲取唯一的會話ID，然後當應用程序2嘗試從iframe連接時，出現上述錯誤，當應用程序2不在iframe中時，它連接正常並獲得會話ID。請幫助，如果可以的話，我不知道爲什麼它被阻止，我真的需要這個啓動和運行。預先感謝您的幫助

Answer 1

您遇到過同源策略。

最簡單的解決方案是從同一臺服務器運行iframe。

既然你有機會獲得I.T時間閱讀了關於CORS 你基本上要配置服務器，以允許XSS從您的域。

您也可以嘗試這樣的：

document.domain = "intranet" 

讀了它here