跨域解決方案

一、JSONP

JSONP全稱為JSON with Padding（填充式JSON或參數式JSON），是一種跨域數據訪問的解決方案。它通過插入一個script標籤，讓服務器返回一段JavaScript代碼。JSONP的原理是利用script標籤沒有跨域限制的漏洞，通過script標籤加載數據，由於服務端的數據是被包裹在回調函數中的，因此客戶端可以通過回調函數來獲取數據。JSONP的優點是兼容性好，可跨瀏覽器訪問

// 前端代碼
function callback(data) {
  console.log(data);
}

let script = document.createElement('script');
script.src = 'http://www.example.com/api?id=1&callback=callback';
document.head.appendChild(script);

// 後端代碼
let data = {
  name: '張三',
  age: 18,
  gender: '男'
}
let jsonpStr = `callback(${JSON.stringify(data)})`;
res.end(jsonpStr);

二、CORS

CORS是Cross-Origin Resource Sharing縮寫，即跨域資源共享。它是由W3C標準制定的，是一種允許瀏覽器向跨源服務器發出請求，從而克服了AJAX只能同源使用的限制。CORS通信與同源的AJAX通信相比，需要瀏覽器和服務器同時支持。其原理是在請求頭中添加Origin字段，服務器端返回的響應頭中，必須有Access-Control-Allow-Origin字段，用於指定允許的來源域名，如果所有來源都允許，則可以設置為「*」。

// 前端代碼
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/api?id=1');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send();

// 後端代碼
app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  next();
});

三、代理服務器

代理服務器也是一個常見的跨域解決方案，其原理是通過在服務器端設置代理，將請求先發送給代理服務器，由代理服務器再發送給目標服務器，然後再將結果返回給客戶端，這樣客戶端就不用直接與目標服務器進行通信了。代理服務器的優點是可以在服務器端進行安全性控制，可以緩存數據，減輕目標服務器的負擔。

// 前端代碼
let xhr = new XMLHttpRequest();
xhr.open('GET', '/api?id=1');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send();

// 後端代碼
app.get('/api', function(req, res, next) {
  request('http://www.example.com/api?id=' + req.query.id, function(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.send(body);
    } else {
      res.send(error);
    }
  })
});

四、Nginx反向代理

如果項目中使用了Nginx作為Web服務器，則可以使用Nginx作為反向代理，來解決跨域問題。其原理是在Nginx的配置文件中加入反向代理的配置，將客戶端的請求發送給Nginx服務器，由Nginx服務器再將請求轉發給目標服務器，然後再將結果返回給客戶端。

// Nginx配置文件
location /api/ {
  proxy_pass http://www.example.com/api/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

五、WebSocket

WebSocket是HTML5中新增的一種全雙工通信協議，它可以在瀏覽器與服務器之間建立持久性的連接，實現實時通信。WebSocket協議的優點是可以避免HTTP協議的限制，不受跨域限制，使用更方便，傳輸更快捷。它原理是通過在HTTP/HTTPS協議上建立WebSocket協議，實現雙向通信。

// 前端代碼
let socket = new WebSocket('ws://www.example.com:8080');
socket.onopen = function() {
  socket.send('Hello Server!');
};
socket.onmessage = function(event) {
  console.log(event.data);
};

// 後端代碼
let WebSocketServer = require('ws').Server;
let wss = new WebSocketServer({port:8080});
wss.on('connection', function(socket) {
  socket.on('message', function(message) {
    console.log('received: ', message);
    socket.send('Hello Client!');
  });
});