rest - 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查
问题描述
我已经创建了旅行服务器。它工作正常,我们可以POST
通过 Insomnia 发出请求,但是当我们POST
在前端通过 axios 发出请求时,它会发送一个错误:
has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
我们对 axios 的要求:
let config = {
headers: {
"Content-Type": "application/json",
'Access-Control-Allow-Origin': '*',
}
}
let data = {
"id": 4
}
axios.post('http://196.121.147.69:9777/twirp/route.FRoute/GetLists', data, config)
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
});
}
我的文件:
func setupResponse(w *http.ResponseWriter, req *http.Request) {
(*w).Header().Set("Access-Control-Allow-Origin", "*")
(*w).Header().Set("Access-Control-Allow-Methods", "POST,GET,OPTIONS, PUT, DELETE")
(*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}
func WithUserAgent(base http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
ua := r.Header.Get("Jwt")
ctx = context.WithValue(ctx, "jwt", ua)
r = r.WithContext(ctx)
setupResponse(&w, r)
base.ServeHTTP(w, r)
})
}
const (
host = "localhost"
port = 5432
user = "postgres"
password = "postgres"
dbname = "postgres"
)
func main() {
psqlInfo := fmt.Sprintf("host=%s port=%d user=%s "+
"password=%s dbname=%s sslmode=disable",
host, port, user, password, dbname)
server := &s.Server{psqlInfo}
twirpHandler := p.NewFinanceServiceServer(server, nil)
wrap := WithUserAgent(twirpHandler)
log.Fatalln(http.ListenAndServe(":9707", wrap))
}
正如我之前在 Insomnia 上所说的,它工作得很好,但是当我们发出 axiosPOST
请求时,在浏览器的控制台上会出现以下内容:
已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:它没有 HTTP ok 状态。
解决方案
我相信这是最简单的例子:
header := w.Header()
header.Add("Access-Control-Allow-Origin", "*")
header.Add("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
header.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With")
您还可以添加标题Access-Control-Max-Age
,当然您可以允许任何您希望的标题和方法。
最后,您要响应初始请求:
if r.Method == "OPTIONS" {
w.WriteHeader(http.StatusOK)
return
}
编辑(2019 年 6 月):我们现在为此使用大猩猩。他们的东西得到了更积极的维护,而且他们已经这样做了很长时间。留下旧链接,以防万一。
下面的旧中间件推荐: 当然,为此使用中间件可能会更容易。我不认为我用过它,但似乎强烈推荐这个。
推荐阅读
- dart - 如何实现单例的通用类?
- macos - 如何使用 SwiftUI 在 macOS 10.15 上添加工具提示
- javascript - 使用 JSON 内容设置多个 innerHTML
- reactjs - 用户在地图上标记点时如何获取经纬度值?
- sql - 我正在 SYBASE 数据库中编写一个 SP,我收到类型不匹配的错误,我尝试了所有我知道的方法,但它仍然存在
- python-3.x - 如何组合多个 pathlib 对象?
- c# - 对于某些循环实体,多个添加的实体可能具有相同的主键
- python - “为什么”相同版本的python的2个不同可执行文件?
- powershell - 使用 Powershell 创建自动回复
- r - 使用映射函数的分组回归中的错误