跨域请求通常称为 CORS(Cross-Origin Resource Sharing),它是一种机制,用于在浏览器中处理跨域请求。跨域请求指的是在浏览器中,从一个域名的网页向另一个域名的服务器请求资源,例如在前端 JavaScript 代码中使用 XMLHttpRequest 或 Fetch API 请求不同域名的数据。
跨域请求可能会涉及到不同域名、不同端口、不同协议之间的请求。由于浏览器的同源策略(Same-Origin Policy),默认情况下,跨域请求是不允许的。但是,出于安全和合理的原因,有时需要允许特定的跨域请求。
在后端处理跨域请求时,可以采取以下几种方式:
- CORS 头部设置:
最常见的方式是在后端服务器的响应中添加一些 CORS 头部,例如 Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Headers 等。这些头部指示浏览器允许哪些域、方法和标头来访问资源。
- 代理服务器:
可以通过设置一个代理服务器来转发请求,使前端的请求看起来像是同源请求。代理服务器将前端请求转发给后端服务器,并将响应返回给前端,绕过了浏览器的同源策略。
-
JSONP(仅限 GET 请求):
JSONP 是一种通过添加 <script> 标签来实现跨域请求的方式,仅限于 GET 请求。通过返回一段可执行的 JavaScript 代码,服务器可以将数据传递给前端。
WebSocket:
使用 WebSocket 协议进行跨域通信是另一种方式,WebSocket 不受同源策略的限制。
跨域资源共享中间件:
对于一些后端框架,例如 Django、Express 等,都提供了跨域资源共享中间件,可以方便地设置允许的跨域请求。
package middleware
import (
"fmt"
"net/http"
"strings"
"github.com/gin-gonic/gin"
)
// Cors 跨域
func Cors() gin.HandlerFunc {
return func(c *gin.Context) {
method := c.Request.Method // 请求方法
origin := c.Request.Header.Get("Origin") // 请求头部
var headerKeys []string // 声明请求头keys
for k := range c.Request.Header {
headerKeys = append(headerKeys, k)
}
headerStr := strings.Join(headerKeys, ", ")
if headerStr != "" {
headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr)
} else {
headerStr = "access-control-allow-origin, access-control-allow-headers"
}
if origin != "" {
c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Origin", "*") // 这是允许访问所有域
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE") // 服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
// header的类型
c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
// 允许跨域设置 可以返回其他子段
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar") // 跨域关键设置 让浏览器可以解析
c.Header("Access-Control-Max-Age", "172800") // 缓存请求信息 单位为秒
c.Header("Access-Control-Allow-Credentials", "false") // 跨域请求是否需要带cookie信息 默认设置为true
c.Set("content-type", "application/json") // 设置返回格式是json
}
// 放行所有OPTIONS方法
if method == "OPTIONS" {
c.JSON(http.StatusOK, "Options Request!")
}
// 处理请求
c.Next()
}
}
这是一个用于处理跨域请求的中间件代码示例,它使用了 Gin 框架。该中间件会添加必要的响应头,以允许跨域请求。具体来说,它会将以下响应头添加到每个响应中:
Access-Control-Allow-Origin
:设置为*
,允许所有域名进行跨域请求。Access-Control-Allow-Methods
:指定服务器支持的跨域请求方法。Access-Control-Allow-Headers
:指定服务器支持的跨域请求的头部信息。Access-Control-Expose-Headers
:指定浏览器可以访问的响应头部信息。Access-Control-Max-Age
:设置预检请求(OPTIONS)的缓存时间,以减少预检请求次数。Access-Control-Allow-Credentials
:设置是否允许跨域请求携带 Cookie。
此外,该中间件还会处理 OPTIONS 请求,并返回 "Options Request!" 作为响应内容。
你可以在需要处理跨域请求的路由上使用这个中间件,例如:
router := gin.Default()
// 使用Cors中间件处理跨域请求
router.Use(middleware.Cors())
// 定义路由和处理函数
router.GET("/example", func(c *gin.Context) {
// 处理逻辑
c.JSON(http.StatusOK, gin.H{"message": "Hello, CORS is handled!"})
})
// 运行服务器
router.Run(":8080")
在上面的示例中,middleware.Cors()
中间件会处理所有的跨域请求,并在需要的情况下添加相应的响应头。