在網(wǎng)頁開發(fā)的過程中，時常需要進行跨域請求，去測試服務(wù)器請求數(shù)據(jù)。

• 跨域限制是瀏覽器行為，不是服務(wù)器行為
  要理解和解決跨域問題，需要深刻理解-跨域限制是瀏覽器行為，不是服務(wù)器行為。這也是為什么跨域通過postman這類工具來直接請求服務(wù)器接口數(shù)據(jù)，而在網(wǎng)頁中通過js就不可以的原因，因為js運行在瀏覽器，當(dāng)js運行的環(huán)境url和請求的接口數(shù)據(jù)的url不同域，并且服務(wù)器沒有允許跨域請求時，瀏覽器就會認(rèn)為這個請求是不安全的，就會限制請求。

理解了跨域限制是瀏覽器行為，不是服務(wù)器行為的原理后，就很容易解決跨域問題了。有兩種方法：
1、 服務(wù)器端后臺代碼進行特殊設(shè)置，允許客戶端進行跨域請求

• java

private void enableCORS(Request request, Response response) {
    response.header("Access-Control-Allow-Origin", "*");
}

• golang

func EnableCORSAndCredit(w *http.ResponseWriter, req http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", req.Header.Get("Origin"))             //允許訪問所有域
    (*w).Header().Add("Access-Control-Allow-Headers", "Content-Type") //header的類型
    (*w).Header().Add("Access-Control-Allow-Credentials", "true")
}

2、客戶端設(shè)置代理。利用服務(wù)器之間沒有跨域的原理,通過本地起的服務(wù)當(dāng)做代理服務(wù)器,與我們需要真正請求的服務(wù)器做中間數(shù)據(jù)的傳輸。

• 本地開發(fā)利用caddy做代理服務(wù)器避免跨域請求

首先安裝caddy

# mac
brew install caddy

編寫caddy代理配置文件

# Caddy 服務(wù)器運行的主機、端口
localhost:3002
# 假定react開發(fā)服務(wù)器運行在 localhost:3000 端口
proxy / http://localhost:3000
proxy /sockjs-node localhost:3000 {
  websocket
}
proxy /api https://server

啟動caddy

$ caddy --conf ./caddyfile

隨后我們就可以在 localhost:3002 訪問 React.js 頁面 - 注意不是 localhost:3000。caddy 會將 / 請求轉(zhuǎn)發(fā)到 3000 端口，而 /api 請求則轉(zhuǎn)發(fā)到 https://server，一樣解決跨域問題。