WebSocket跨域問題詳細闡述

一、WebSocket簡介

WebSocket是一種在單個TCP連接上進行全雙工通信協議的標準。它可以在瀏覽器和伺服器之間創建一個持久連接，使得瀏覽器和伺服器之間的數據可以進行實時雙向傳輸。

實際使用中，WebSocket可以用於多種場景，比如即時通信、在線遊戲等。

二、WebSocket跨域問題

WebSocket使用起來非常方便，但是它也存在跨域問題，這意味著在使用WebSocket時，瀏覽器會做出安全限制，阻止從不同源載入的腳本訪問共享資源。

1、同源策略

同源策略是瀏覽器的一項重要安全策略，它限制了從一個源載入的文檔或腳本如何與另一個源的資源進行交互。同源指的是協議、域名、埠均相同的兩個文檔。

舉個例子：
假設訪問的頁面URL為 https://www.example.com/index.html
1）當請求資源URL為 https://www.example.com/static.js 時，屬於同源，可以進行訪問。
2）當請求資源URL為 https://static.example.com/main.css 時，屬於不同源，無法進行訪問。

2、WebSocket跨域解決方法

方式一：使用反向代理

示例代碼：
// 假設WebSocket需要連接的伺服器地址為 ws://localhost:8080
// 實際上需要連接到的伺服器是 ws://example.com/ws
// 這裡使用nginx配置反向代理
location /ws {
  proxy_pass http://localhost:8080;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
}
// 前端JavaScript代碼示例
var socket = new WebSocket('ws://example.com/ws');

使用反向代理的方法相對簡單，但是需要在伺服器端進行配置。

方式二：使用CORS

WebSocket和XMLHttpRequest都可以使用CORS協議，這裡只介紹WebSocket的CORS解決方法。

示例代碼：
// 在WebSocket的請求頭中加入Origin欄位
var socket = new WebSocket('ws://example.com/ws');
socket.onopen = function(event) {
  socket.send('Hello, Server!');
};
socket.onerror = function(event) {
  console.error(event);
};

使用CORS的方法比較方便，但是需要伺服器端進行相應的配置。

方式三：使用WebSocket子協議

示例代碼：
// 後端WebSocket服務端代碼
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
  // 使用子協議「my-custom-subprotocol」
  // 如果客戶端不支持這個子協議，連接會失敗
  ws.send('Hello, Client!', { subprotocol: 'my-custom-subprotocol' });
});
// 前端JavaScript代碼示例
var socket = new WebSocket('ws://example.com/ws', 'my-custom-subprotocol');
socket.onmessage = function(event) {
  console.log(event.data);
};

使用子協議的方法需要前後端雙方都進行額外的處理，不大常用。

三、總結

在WebSocket中，跨域問題可以通過使用反向代理、CORS和WebSocket子協議解決。具體選用哪種方法，需要根據具體情況而定，權衡利弊。