使用 fetch 从通过 golang 提供的 HTML 文件发送请求

Posted 2023-02-27

【中文标题】使用 fetch 从通过 golang 提供的 HTML 文件发送请求

【英文标题】：Send request using fetch from HTML file served through golang

【发布时间】：2021-09-20 03:59:32

【问题描述】：

我正在使用以下代码来提供 html 文件。

func main() 
    http.HandleFunc("/", func(rw http.ResponseWriter, r *http.Request) 
        path := r.URL.Path
        if path == "/" 
            path = "index.html"
        

        http.ServeFile(rw, r, "./"+path)
    )

    http.ListenAndServe(":5555", nil)

此 HTML 文件包含一个 javascript 文件，该文件使用 fetch 来检索一些数据。这在通过 apache 提供服务时可以正常工作，但在通过 Go-server 提供服务时则不行。

这是获取请求：

const fetchSettings = 
        method: "POST",
        body: JSON.stringify(requestBody),
        headers: 
            "Content-Type": "application/json",
        
    ;
const response = await fetch("https://some.url", fetchSettings);

这是我得到的错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some.url. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some.url. (Reason: CORS request did not succeed).

【问题讨论】：

您在 html 页面上遇到的错误是什么？如果您打开 devtools 控制台，我们将获得更多关于问题所在的上下文。

它可能由于 CORS 错误而失败。您可以在处理程序中添加对 OPTIONS 的处理以使其工作

这个错误告诉你到底是什么问题。要修复它，首先通过reading this 了解 CORS。然后check this issue with quite a few options for solutions.

是的，它们确实依赖于您控制处理请求的服务器。它们是一种安全措施。当您说“我正在使用以下代码提供 HTML 文件”时，听起来您实际上控制了服务器。如果您不这样做，那么 CORS 会保护访问该服务器的用户免受潜在的不安全跨域请求的影响，而您将无法解决这个问题。

@jazzdrottningen 您的 Go 应用程序和 Apache 服务器是否都从完全相同的 URL 提供服务？因为听起来 Apache 服务器所服务的任何 URL 都可能在远程服务器的 CORS 配置的允许来源列表中。因此，假设您正在点击localhost:apache，并且远程服务器上的 CORS 设置为允许来自该 url 的跨源，它会正常工作。但是，当您从 localhost:1234 运行它时，它会失败。无论如何，这是一个 CORS 问题（它按预期工作），而不是一个 go 问题。

【参考方案1】：

您需要包含一个 Access-Control-Allow-Origin 标头：

rw.Header().Set("Access-Control-Allow-Origin", "*")

那个允许所有来源，你可以在这里阅读更多：https://perennialsky.medium.com/handle-cors-in-golang-7c5c3902dc08

下面是它如何适合您的代码：

func main() 
    http.HandleFunc("/", func(rw http.ResponseWriter, r *http.Request) 
        path := r.URL.Path
        if path == "/" 
            path = "index.html"
        
        rw.Header().Set("Access-Control-Allow-Origin", "*")
        http.ServeFile(rw, r, "./"+path)
    )
    
    http.ListenAndServe(":5555", nil)

【讨论】：

谢谢，但我已经尝试过了，没有任何区别。

如果设置了标头，为什么会显示“原因：CORS 标头‘Access-Control-Allow-Origin’缺失”？您确定设置正确吗？

没有区别的原因是 fetch-request 没有发送到 go 服务器，而是发送到我无法控制的不同 Web 服务器。

您说当脚本由 Apache 托管时它工作正常，这对远程服务器应该没有任何影响，但它可能会更改脚本本身的 CORS 策略。如果不在本地设置 CORS 标头，您将无法访问远程服务器。