ReactJS Axios 和 Go API 之间的请求答案

【问题标题】：Requests between ReactJS Axios and Go APIReactJS Axios 和 Go API 之间的请求
【发布时间】：2021-09-13 19:42:39
【问题描述】：

我有一个在 NodeJS 服务器上运行的 ReactJS 应用程序，我使用了 Express，因为我需要同步我的前端和后端路由器。我还使用了一个使用 Chi 的 Go API，它工作正常（我已经用邮递员做了测试，它实际上正在工作）。为了从 ReactJS 向我的 Go API 发送请求，我使用 Axios，但我的控制台中出现错误：

从源“http://localhost:3000”访问“http://localhost:8080/api/connection/getToken”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

但我已经对我的 Axios 请求和我的 Golang API 代码进行了一些更改。

这是我的 ReactJS Axios 请求：

    axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
        axios.get('http://localhost:8080/api/connection/getToken', {  
            headers: {
                 'Access-Control-Allow-Origin': true,
                 code: code,
                } 
        }).then(res => console.log(res));

这是我的 Go 代码：

    func connectInit(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "*")
        if r.Header.Values("code") != nil {
            code := r.Header.Get("code")
            clientToken, err := getClientToken(code)
            if err != nil {
                fmt.Fprint(w, err.Error())
            }
            fmt.Fprint(w, clientToken)

        }
    }

这是我在 Go 中的 Chi 路由器：

    func ConnexionRoutes() *chi.Mux {
        router := chi.NewRouter()
        router.Get("/getToken", connectInit)
        return router
    }

谢谢！

【问题讨论】：

服务器端处理程序必须处理 OPTION 请求并返回必要的 CORS 标头。流行的多路复用实现通常有预先构建的 CORS 中间件，我不知道是否有一个用于 Chi。您可以尝试搜索其中之一，或者通过编写 CORS 处理程序来实现自己。

标签： javascript node.js reactjs express go

【解决方案1】：

您遇到的问题是 go 服务器在源 http://localhost:8080 上提供服务

虽然 react 本地 webapp 肯定是在源 http://localhost:3000 上提供的（这是我大部分时间都拥有的）

根据https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin，来源（在浏览器的意义上）是：

"://" [ ":" ]

浏览器检测到 JS react webapp 正在尝试访问另一个没有特定标头的源（端口 8080）并因此阻止它。

对此的一种解决方案是配置 go API，使其返回适当的标头 Access-Control-Allow-Origin: *。

更好的是，我个人使用 chi：

import "github.com/go-chi/cors"

router := chi.NewRouter()
router.Use(cors.AllowAll().Handler)

更多关于 CORS 的信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

【解决方案2】：

React 现在建议 package.json 文件中的 proxy 字段来收集和重定向您的 webapp 请求：

"proxy": "http://localhost:8080"

应该完全不使用cors。

见https://create-react-app.dev/docs/proxying-api-requests-in-development/

【讨论】：