reactjs - 在 Gorilla Mux : 403 error on POST request 中配置 CORS

标签 reactjs post go http-post gorilla

我有一个 API,目前正在尝试使用它的一个端点。端点用于 POST 请求,端点按预期工作。 API 在云中运行,我使用 curl 对其进行了测试,它非常完美,然后我试图从我的 React 应用程序中使用它,但我得到了 403 状态代码

在浏览器的控制台中观察,我发现我在 OPTIONS 请求中收到了该错误,并且 POST 从未完成。这是控制台中显示的结果的屏幕截图:

enter image description here

然后,我制作了一个带有表单的简单 HTML 文件,我在其中放置了所需的输入和指向该端点的操作,它运行良好。然后,我不知道错误在哪里?我在 API 中启用了 CORS

在 API 中,我使用的是 Gorilla/mux,我有这样的东西:

// Set up a router and some routes
    r := mux.NewRouter()
    r.HandleFunc("/", handleHome)
    //some other routes

    headersOk := handlers.AllowedHeaders([]string{"*"})
    originsOk := handlers.AllowedOrigins([]string{"*"})
    methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

    // Start http server
    port := fmt.Sprintf(":%d", SomePort)
    http.ListenAndServe(port, handlers.CORS(originsOk, headersOk, methodsOk)(r))

使用:

"github.com/gorilla/mux"
"github.com/gorilla/handlers"

我在浏览器中收到的消息是(西类牙语):

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://miURL (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').

英语:基本上服务器拒绝请求,因为 CORS header 不存在。

那么,我在路由器配置中做错了什么?

最佳答案

rs/cors你应该很容易解决 CORS 问题。

在您的server.go

package main

import (
    . . .       
    "fmt"
    "log"
    "net/http"
    "github.com/gorilla/mux"
    "github.com/rs/cors"
    "../myhandler"
)

func main() {

fmt.Println("Settin up server, enabling CORS . . .")

  c := cors.New(cors.Options{
      AllowedOrigins: []string{"*"}, // All origins
      AllowedMethods: []string{"GET"}, // Allowing only get, just an example
  })

  router := mux.NewRouter()
  // Example handler
  router.HandleFunc("/test", myhandler.TestHandler())
  http.Handle("/", router)

  // Bind to port 8000 and pass our router in and pass the cors Handler
  log.Fatal(http.ListenAndServe(":8000"), c.Handler(router)))

  fmt.Println("Server is ready and is listening at port :8000 . . .")

}

在你的 testhandler.go 上,假设你想接受 Content-Type: application/json

. . .

func TestHandler func(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    return
}

关于reactjs - 在 Gorilla Mux : 403 error on POST request 中配置 CORS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45965812/

相关文章:

php - 表单注册没有收到错误

json - 从 golang 中的 json 文件中读取 slice

go - 为什么 Revel JSON 响应中的所有键都不大写?

reactjs - 功能组件随着 useMemo/React.memo 消失

javascript - 使用 `GET` 的客户端请求表单,即使定义了 `POST`。 javascript iframe 是原因吗?

php - jquery:如何在新选项卡中打开网址并将发布数据传递到该网址

GO语言: fatal error: all goroutines are asleep - deadlock

javascript - 为什么我的 create-react-app 项目在编译时会输出数千行关于类型的警告?

javascript - NextJs 多区域共享 header

javascript - 为什么我的 onclick 函数在 React 中不起作用