首頁(yè) 猿問(wèn) Angular 前端 POST 到...

Angular 前端 POST 到 Golang 后端方法不允許并被 CORS 策略阻止

Go

慕田峪9158850 2023-06-01 16:27:06

我正在嘗試從我的 Angular 前端向我的 Golang 后端發(fā)出發(fā)布請(qǐng)求，兩者都由同一臺(tái)機(jī)器提供。我不斷得到：OPTIONS http://localhost:12345/anteroom 405 (Method Not Allowed)和Access to XMLHttpRequest at 'http://localhost:12345/anteroom' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.Golang 后端，使用 Gorilla mux 路由器：func main() { router := mux.NewRouter() router.HandleFunc("/anteroom", anteroom).Methods("POST") log.Fatal(http.ListenAndServe(":12345", router))}func anteroom(res http.ResponseWriter, req *http.Request) { res.Header().Set("Access-Control-Allow-Origin", "*") // *Edit 17 Jan 19 12.44pm*: Billy, user268396, and Peter suggest that OPTIONS should be added. As mentioned below, I've already tried that. res.Header().Set("Access-Control-Allow-Methods", "POST") res.Header().Set("Content-Type", "application/json") // Put it into a struct variable and print a bit of it. _ = json.NewDecoder(req.Body).Decode(&member) fmt.Println(member.ID)}

查看完整描述

3 回答

倚天杖

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

這不是你CORS在后端的做法。您的后端需要偵聽 HTTPOPTIONS類型的請(qǐng)求并將 CORS 標(biāo)頭發(fā)送到那里。

控制流程大致是：

你在前端請(qǐng)求一些東西
瀏覽器判斷：呃哦，這需要 CORS
瀏覽器首先對(duì)請(qǐng)求的資源進(jìn)行OPTIONS請(qǐng)求，協(xié)商CORS
根據(jù)結(jié)果，任一瀏覽器都會(huì)向您的前端拋出錯(cuò)誤
或者它繼續(xù)您的前端發(fā)出的實(shí)際請(qǐng)求。
從現(xiàn)在開始一切正常
當(dāng)瀏覽器獲得您的實(shí)際 API 回調(diào)的結(jié)果時(shí)，它會(huì)過(guò)濾掉未在步驟 3 和 4 中列入白名單/協(xié)商的內(nèi)容。
作為 HTTP 調(diào)用的結(jié)果，它將可能被審查的結(jié)果呈現(xiàn)給前端。

反對(duì) 回復(fù) 2023-06-01

瀟瀟雨雨

TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊

問(wèn)題的解決在很大程度上要感謝所有幫助我意識(shí)到我沒有正確執(zhí)行 CORS 的人?；旧?，有兩個(gè)問(wèn)題：1. 我不知道在后端正確設(shè)置標(biāo)頭，以及 2. 我沒有正確格式化我的 JSON 數(shù)據(jù)。

通常，它很簡(jiǎn)單：當(dāng)你想要請(qǐng)求某些東西時(shí)，瀏覽器會(huì)根據(jù)你已有的內(nèi)容設(shè)置適當(dāng)?shù)臉?biāo)頭，然后將請(qǐng)求發(fā)送出去。服務(wù)器響應(yīng)。

但是，假設(shè)您在同一域的后端和前端有一個(gè) API POST 端點(diǎn)（我想我們大多數(shù)人都在開發(fā)，但可能不在生產(chǎn)中），并且您正在使用 application/x 以外的任何東西-www-form-urlencoded，multipart/form-data，還有text/plain，那就有點(diǎn)不一樣了。就我而言，我正在使用 application/json。所以，它看起來(lái)像這樣：

瀏覽器使用 OPTIONS 方法發(fā)送請(qǐng)求，詢問(wèn)允許使用哪些方法和內(nèi)容類型以及其他內(nèi)容。這稱為預(yù)檢請(qǐng)求。它還沒有發(fā)送我的 JSON 對(duì)象。
服務(wù)器響應(yīng)預(yù)檢請(qǐng)求。

為了讓服務(wù)器響應(yīng)允許的內(nèi)容，我們需要正確設(shè)置后端以允許 Access-Control-Allow-Methods 中的 OPTIONS 方法，如果您像我一樣使用 Gorilla mux，請(qǐng)記住也允許它進(jìn)入router.HandleFunc()。

因?yàn)槲覀兊那昂蠖嗽谕粋€(gè)域（http://localhost），最簡(jiǎn)單的做法是將 Access-Control-Allow-Origin 設(shè)置為“*”。但是，根據(jù)我們的需要，我們可能不想在生產(chǎn)中這樣做，因?yàn)?* 意味著全世界及其他地方都可以發(fā)送請(qǐng)求。

因?yàn)槲乙邮認(rèn)SON，所以我在后端也設(shè)置了Content-Type為application/json。這是我問(wèn)題的另一半。長(zhǎng)話短說(shuō)，無(wú)論對(duì)其他人有用的是什么，出于某種原因我仍然必須應(yīng)用JSON.stringify()到我的原始 JSON 數(shù)據(jù)。然后它完美地工作。

一旦瀏覽器收到允許的 OPTIONS，它就會(huì)過(guò)濾掉不允許的內(nèi)容，并發(fā)回僅包含適當(dāng)數(shù)據(jù)的請(qǐng)求。在我的例子中，這將是 JSON 對(duì)象。

就是這樣。

反對(duì) 回復(fù) 2023-06-01

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

“ Access-Control-Allow-Origin”表示您允許向該服務(wù)器發(fā)出請(qǐng)求的來(lái)源。

它可以是以下形式：

“*”
“ https://github.com ”
“ http://127.0.0.1:8080 ”
“鉻擴(kuò)展：// *”
“*.some-domain.com”

Access-Control-Allow-Methods當(dāng)你想從 CORS 發(fā)布數(shù)據(jù)時(shí)，“ ” 應(yīng)該是 []string("POST", "OPTION") 。

說(shuō)到golang，看godoc https://golang.org/pkg/net/http/#Header

type Header map[string][]string

而且我總是建議使用Header.Add()instead ofHeader.Set()除非你確切地知道你在做什么。因?yàn)?header 中的每個(gè)值總是 []string。

所以應(yīng)該是

  res.Header().Add("Access-Control-Allow-Origin", "*")
    res.Header().Add("Access-Control-Allow-Methods", "POST")
    res.Header().Add("Access-Control-Allow-Methods", "OPTION")
    res.Header().Add("Content-Type", "application/json")

反對(duì) 回復(fù) 2023-06-01