将我的应用程序切换到新数据库后，即使我的代码没有更改，我也会收到 CORS 请求错误。为什么会出现这种情况？

Question

我有一个小应用程序完美运行了近两年。它包括：

1. fly.io 上托管的 Postgres 数据库
2. 用 Go 编写的 API 服务器，也托管在 Fly.io 上
3. 使用 React 和 axios 的前端客户端，托管在 firebase 上

几周前，数据库停止工作（我不确定为什么），所以我决定在 Supabase 上创建一个新数据库并将其交换到我的堆栈中。我通过更改环境机密中的数据库 URL 来完成此操作，因此没有更改任何一行实际代码。切换后，前端客户端的 GET 和 POST 请求与之前一样，但现在 POST 和 DELETE 请求遇到 CORS 请求错误。

跨源请求被阻止：同源策略不允许读取 https://blah.com/api/v1/friends/friend/?friend=test 处的远程资源。 （原因：CORS请求未成功）。状态代码：（空）。 ... 消息：“网络错误”，名称：“AxiosError”，代码：“ERR_NETWORK”

我没有更改任何一行代码，所以我不知道为什么会突然发生这种情况。

API服务器代码 完整代码可以在这里找到：https://codeberg.org/VictorL/kit-api

func enableCors(w *http.ResponseWriter) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Headers", "Content-Type")
}

if r.Method == "DELETE" {
        enableCors(&w)
        // check if friend exists
        if friendExists(db, friendParam) {
            query := fmt.Sprintf("DELETE FROM friends WHERE name='%s'", friendParam)

            _, err := db.Query(query)
            if err != nil {
                panic(err.Error())
            }

            w.WriteHeader(http.StatusAccepted)
            w.Write([]byte("202 - Friend deleted: " + friendParam))
        } else {
            w.WriteHeader(http.StatusNotFound)
            w.Write([]byte("404 - Friend not found"))
    }
}

前端客户端代码 完整代码可以在这里找到：https://codeberg.org/VictorL/keep-in-touch

  const onDelete = () => {
    axios({
      method: "delete",
      url:
        "https://blah.com/api/v1/friends/friend/?friend=" +
        friend.FriendName,
      // headers: { "Content-Type": "application/json" },
    })
      .then(function (response) {
        console.log(response);
        navigate("/");
      })
      .catch(function (error) {
        console.log(error);
      });
  };

我尝试的第一件事是使用

curl

测试 API，POST 和 DELETE 请求都按预期工作。这让我认为 API 服务器正在按预期工作。

我尝试的第二件事是将

enableCors(&w)

添加到我的 API 代码中。该函数始终存在于我的原始代码中，但我尝试将其专门添加到 DELETE 和 POST if 语句中，但它没有修复错误。 我更新的代码已发布在上面。

当我更改飞行环境秘密时，我必须重新部署 API 服务器。我想知道我是否无意中将 Go 更新到了 1.23（我之前使用的是 1.16，这就是我的 go.mod 文件中所述的内容。）如果 Go 确实更新了，那么也许我需要更新 axios（可能还有其他东西）我的前端客户端也是吗？

此时，我什至不确定损坏的组件是我的 API 服务器还是前端客户端。

Answer 1

1. curl 总会返回结果，因为 cros 是浏览器做出的阻塞动作
2. 我用cors测试了你的代码，没问题，与golang/axois版本无关

你应该调试前端。

• 看一下axios的request的url。
• 检查axios返回的响应头中是否包含'access-control-allow-origin:*'