首頁猿問 Angular 前端 POST 到...

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

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

我正在嘗試從我的 Angular 前端向我的 Golang 后端發出發布請求，兩者都由同一臺機器提供。我不斷得到：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貢獻1828條經驗獲得超3個贊

這不是你CORS在后端的做法。您的后端需要偵聽 HTTPOPTIONS類型的請求并將 CORS 標頭發送到那里。

控制流程大致是：

你在前端請求一些東西
瀏覽器判斷：呃哦，這需要 CORS
瀏覽器首先對請求的資源進行OPTIONS請求，協商CORS
根據結果，任一瀏覽器都會向您的前端拋出錯誤
或者它繼續您的前端發出的實際請求。
從現在開始一切正常
當瀏覽器獲得您的實際 API 回調的結果時，它會過濾掉未在步驟 3 和 4 中列入白名單/協商的內容。
作為 HTTP 調用的結果，它將可能被審查的結果呈現給前端。

反對回復 2023-06-01

瀟瀟雨雨

TA貢獻1833條經驗獲得超4個贊

問題的解決在很大程度上要感謝所有幫助我意識到我沒有正確執行 CORS 的人。基本上，有兩個問題：1. 我不知道在后端正確設置標頭，以及 2. 我沒有正確格式化我的 JSON 數據。

通常，它很簡單：當你想要請求某些東西時，瀏覽器會根據你已有的內容設置適當的標頭，然后將請求發送出去。服務器響應。

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

瀏覽器使用 OPTIONS 方法發送請求，詢問允許使用哪些方法和內容類型以及其他內容。這稱為預檢請求。它還沒有發送我的 JSON 對象。
服務器響應預檢請求。

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

因為我們的前后端在同一個域（http://localhost），最簡單的做法是將 Access-Control-Allow-Origin 設置為“*”。但是，根據我們的需要，我們可能不想在生產中這樣做，因為 * 意味著全世界及其他地方都可以發送請求。

因為我要接收JSON，所以我在后端也設置了Content-Type為application/json。這是我問題的另一半。長話短說，無論對其他人有用的是什么，出于某種原因我仍然必須應用JSON.stringify()到我的原始 JSON 數據。然后它完美地工作。

一旦瀏覽器收到允許的 OPTIONS，它就會過濾掉不允許的內容，并發回僅包含適當數據的請求。在我的例子中，這將是 JSON 對象。

就是這樣。

反對回復 2023-06-01

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

“ Access-Control-Allow-Origin”表示您允許向該服務器發出請求的來源。

它可以是以下形式：

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

Access-Control-Allow-Methods當你想從 CORS 發布數據時，“ ” 應該是 []string("POST", "OPTION") 。

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

type Header map[string][]string

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

所以應該是

  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")

反對回復 2023-06-01

3 回答
0 關注
180 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答