为什么在获取 API 数据时会禁止 403?

Question

在前端使用react-admin访问gin开发的API后端。

• 前端：http://localhost:3000
• 后端：http://localhost:8080

通过 Chrome 浏览器访问网址时：

http://localhost:3000/#/posts

从 Chrome 控制台收到此消息：

fetch.js:41 OPTIONS http://localhost:8080/posts?_end=10&_order=DESC&_sort=id&_start=0 403 (Forbidden)

但是，如果从浏览器访问上面的URI，它可以返回JSON结果。

从杜松子酒开发的 API 输出中，得到以下消息：

[GIN] 2018/06/13 - 16:38:16 | 403 |       1.995µs |             ::1 | OPTIONS  /posts?_end=10&_order=DESC&_sort=id&_start=0

Answer 1

由于前端和后端位于不同的源头(分别为 localhost：3000 和 localhost：8080(，您需要在后端设置 CORS 以允许 localhost：3000 访问它。

https://github.com/gin-contrib/cors 看起来像是门票。

Answer 2

在服务器端应用程序中为响应设置访问控制允许源标头将解决此问题。

加

'Access-Control-Allow-Origin: http://localhost:3000' or
'Access-Control-Allow-Origin: *' 

在您的服务器端代码中。

Answer 3

你应该添加一个 CORS中间件

主去：

r := gin.Default()
r.Use(CORSMiddleware())

CORSMiddleware：

func CORSMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
c.Writer.Header().Set("Access-Control-Max-Age", "86400")
c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
c.Writer.Header().Set("Access-Control-Allow-Headers", "Origin, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
c.Writer.Header().Set("Access-Control-Expose-Headers", "Content-Length")
c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
if c.Request.Method == "OPTIONS" {
c.AbortWithStatus(200)
} else {
c.Next()
}
}
}