问题探索
问题引入
目前在 Vite+Vue3 的项目中使用 fetch API 调用 siyuan 的 API 时候,如果加上 API 鉴权,就会返回 CORS 错误,如下:
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
根据 https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request 这篇文章的理解文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
在检测到 CORS 跨域复杂请求(例如 POST 等)时候,会发送一个 OPTIONS 的预检请求,请求会返回下一个请求允许的 header 和 method文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
检测请求可以看到文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
可以看到思源服务端返回的 Access-Control-Request-Headers 并没有 Authorization 字段。这就是导致最终 CORS 失败的根本原因。文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
最优解决方案
查看 https://github.com/siyuan-note/siyuan/blob/master/kernel/server/serve.go) 代码可以看到,服务端是支持 CORS 的,代码如下文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
ginServer.Use(cors.Default())
这里实用的默认策略。我们看看详细的默认策略文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
可以看到并没有包含 Authorization 字段。文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
而 siyuan 的 API 文档鉴权部分明确表示需要在 header 传递该字段文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
https://github.com/siyuan-note/siyuan/blob/master/API_zh_CN.md#%E9%89%B4%E6%9D%83文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
解决方案:
参考了
https://stackoverflow.com/questions/29418478/go-gin-framework-cors文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
代码修改如下文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
func CORSMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Credentials", "true")
c.Header("Access-Control-Allow-Headers", "origin, Content-Length, Content-Type, Authorization")
c.Header("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS")
if c.Request.Method == "OPTIONS" {
c.AbortWithStatus(204)
return
}
c.Next()
}
}
然后原来的文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
ginServer.Use(cors.Default())
调整为文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
ginServer.Use(CORSMiddleware())
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
问题解决。文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
候选的解决方案
如果修改内核影响太大或者看看能不能把跨域策略提供配置可选。文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
参考
https://blog.csdn.net/root_miss/article/details/82740399文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
https://stackoverflow.com/questions/29418478/go-gin-framework-cors文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
文章源自浅海拾贝-https://blog.terwergreen.com/back-end-service-coros-pre-inspection-request-verification-question-exploration-zvlefe.html
- 扫码加我微信
- 验证消息请输入:来自你的博客
-
- 我的微信公众号
- 微信扫一扫与我交流吧
-
评论