Gin 如何實現跨域

什麼叫做跨域

    "跨域" 是一個網絡安全的概念，起源於瀏覽器的同源策略。同源策略是一種約定，它是由網景（Netscape）公司提出的一個重要的安全策略。所謂同源是指 "協議 + 域名 + 端口號" 三者相同，只要不同時，就算是不同源。

    換句話說，"跨域" 指的是從一個域名的網頁去請求另一個域名的資源。例如，"http://website1.com" 的網頁通過 Ajax 獲取 "http://website2.com" 的數據，由於不滿足同源策略，這種行爲默認是被瀏覽器禁止的。

    但有時候，我們爲了滿足業務需求，需要進行跨域訪問，這時候就需要按照一定的方式（比如修改 HTTP 響應頭，或者設置 JSONP 等方法）來實現跨域訪問。

Gin 如何處理跨域呢

package main
import (
  "github.com/gin-gonic/gin"
  "net/http"
)
func Cors() gin.HandlerFunc {
  return func(c *gin.Context) {
    method := c.Request.Method
    c.Header("Access-Control-Allow-Origin", "*")
    c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
    c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
    c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
    c.Header("Access-Control-Allow-Credentials", "true")
    if method == "OPTIONS" {
      c.AbortWithStatus(http.StatusNoContent)
    }
    // 處理請求
    c.Next()
  }
}
func main() {
  r := gin.New()
  r.Use(Cors())
  r.GET("/test", func(c *gin.Context) {
    c.JSON(200, gin.H{
      "message": "hello test",
    })
  })
  r.Run()
}

在上面參數的意義主要是：

  1. Access-Control-Allow-Origin: 這個 Header 定義了那些域名可以訪問資源。如果設置爲 “*”，則表示允許所有域名進行訪問。

  2. Access-Control-Allow-Headers: 這個 Header 定義瀏覽器在實際請求中可以攜帶哪種類型的 header。通常設置爲一些自定義的 Header，如上例中的 "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token"，這幾項代表這些 Header 是可以被允許傳遞的。

  3. Access-Control-Allow-Methods: 這個 Header 定義了可以支持哪些 HTTP 動詞，如 “POST, GET, OPTIONS”。

  4. Access-Control-Expose-Headers: 這個 Header 讓服務器把允許瀏覽器訪問的 header 白名單填入該字段，讓前端可以使用 getResponseHeader 獲取到其他信息。

  5. Access-Control-Allow-Credentials: 這個 Header 定義了是否允許發送 Cookie。true 表示允許，false 表示禁止。通常我們設爲 true，這樣做的目的是爲了在跨站請求時能夠保持用戶的登錄狀態

在上述代碼中，Cors 是一箇中間件，用來自定義跨域訪問的規則。這些規則通過設置 HTTP header 來實現，通過c.Header方法來設置。然後，我們將這個中間件加入到 router 的處理鏈中，這樣每次 request 都會先經過 Cors 這個中間件。

這樣，當你在瀏覽器中對 "/test" 路徑發起請求時，就能正常接收到響應了，實現了跨域訪問。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/IABbFH61dzrQv3xsxeDYmA

猜你喜歡