Express跨域詳解

一、什麼是跨域

跨域，指的是不同網站間相互調用資源的限制。若在同個域名下，則互相調用沒有問題，但在不同域名的情況下，由於瀏覽器的同源策略，JS腳本只能在同源(協議+域名+埠)環境中被訪問。否則會出現跨域問題，會阻礙Web應用程序的正常運行。

例如，我們想從一個名為A的域名的網站中向B域名的伺服器發出請求，則會被禁止。這是因為在 web 安全策略中，跨域訪問是一個禁止的行為。用常用一個比喻解釋跨域：一個人在A城可以自由出入，但去B城卻需要B城的城門守衛放行。

二、跨域解決方案

1. JSONP

JSONP (JSON with Padding)，是一種跨域請求的解決方案。JSONP 的主要思想，是利用 script 標籤的 src 屬性不受瀏覽器同源策略限制的特點，通過向不同域名下的伺服器請求資源，在返回數據的同時，使用特殊的語法，將數據 「包裹」在傳入回調函數的形參中，從而實現跨域請求。但JSONP不能進行POST請求。

// 客戶端請求
$.$.ajax({
    url: 'http://www.someurl.com/somepath',
    type: 'get',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    data: {},
    success: function (res) {
        console.log(res)
    }
})

// 服務端返回數據格式
callback({a:1, b:2})

2. CORS

CORS(Cross-Origin Resource Sharing)，是一種跨域訪問的解決方案。在服務端，可以通過設置響應頭來實現允許跨域訪問。通過在響應頭中添加特定的頭部信息，告訴瀏覽器：該伺服器允許訪問當前站點的數據。同時，瀏覽器也會進行判斷，只有當伺服器設置了允許跨域訪問的 Origin 域名 和請求發起的域名匹配時，才會順利執行請求並返回數據。

// 服務端設置響應頭
app.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin","*")
    res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept")
    next()
})

3. 代理

代理，就是將請求從客戶端發送給自己的伺服器，然後由伺服器代為轉發請求並返回數據給客戶端。當我們需要向一個跨域的 API 伺服器進行數據請求時，就可以通過本地伺服器進行轉發，也就是發送請求的地址改成本地的伺服器地址，本地伺服器再將請求轉發到 API 伺服器。這樣就可以避免瀏覽器的同源策略，解決了跨域問題。

4. window.postMessage

window.postMessage允許跨窗口通信，即在一個窗口發送消息，另一個窗口接收消息。當然，這個window必須來自不同的域名。可以在窗口傳入數據（無論類型還是大小），即從域發送到另一個域的數據，並安全地傳遞全局對象比如window對象。

// 父級窗口發送消息
var popup = window.open('http://localhost:4000/#/login')
popup.postMessage('hello', 'http://localhost:3000')
// 子級窗口響應
window.onmessage = function(e) {
    if(e.origin === 'http://localhost:3000') {
        console.log(e)
    }
}

三、Express解決跨域

Express 框架也提供了跨域的解決方案，可以通過中間件解決跨域問題。

1. CORS中間件

// 配置跨域中間件
var express = require('express');
var cors = require('cors'); //引入中間件cors
var app = express();
app.use(cors()); // 必須在路由前使用

2. 自定義中間件

// 跨域中間件
var express = require('express')
var app = express()
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();
})

3. proxy代理

// 代理訪問中間件
var proxyMiddleware = require('http-proxy-middleware')
app.use('/api',proxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
    '^/api': '/api' //實際url重寫規則,將/api重寫為/api
    }
}))

通過以上介紹，相信大家都能對跨域有了更深刻的了解。根據業務需求和實際情況選擇合適的方案，合理解決跨域問題可以提高開發效率，減少因為跨域問題而耗費的時間和精力，以及使Web應用程序更穩定的運行。