如何在本地使用 fetch 从客户端向服务器发出请求而不会得到不透明的响应？

Posted 2023-02-22

【中文标题】如何在本地使用 fetch 从客户端向服务器发出请求而不会得到不透明的响应？

【英文标题】：how do you make a request from client to server locally using fetch without getting an opaque response?

【发布时间】：2018-12-20 04:18:21

【问题描述】：

我正在 localhost:3000 上运行一个 react 应用程序，并在 localhost:8000 上运行一个 go 服务器。

当我使用 fetch 从客户端创建 request 时 - 响应是不透明的，因此我无法访问数据。

如何发出有效的跨域请求？

客户：

componentWillMount() 
  const url = 'https://localhost:8000/api/items'
  fetch(url,  mode: 'cors' )
  .then(results => 
    return results.json()
  ).then(data => 
  let items = data;
  this.setState(items)
  )

服务器：

func GetItems(w http.ResponseWriter, r *http.Request) 
    items := getItems()
    w.Header().Set("Access-Control-Allow-Origin", "*")
    json.NewEncoder(w).Encode(items)

根据我的阅读 - 跨资源发出的请求应该是不透明的 - 但对于本地开发 - 你如何访问 JSON？

查看请求类型的定义后，我发现：

cors：从有效的跨域请求中收到响应。肯定 可以访问标题和正文。

我想我需要设置一个有效的跨域请求。

我明白了！

这个问题帮助解决了如何在 golang 中设置 CORS：Enable CORS in Golang

这里有 3 个关键点：

将客户端请求中的模式设置为cors

将服务器上的Access-Control-Allow-Origin标头设置为*

在客户端中调用.json() 遵循您可以访问数据的承诺。

【问题讨论】：

不透明是什么意思？

developer.mozilla.org/en-US/docs/Web/API/Response/type 这是一种特定类型的响应。

我明白了 - 那么为什么模式设置为 no-cors？

刚要改变它 - 但仍然没有运气 - 请求是不透明的。我也尝试按照下面的答案设置标题。

【参考方案1】：

w.Header().Set("Access-Control-Allow-Origin", "*")    
w.Header().Add("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("content-type", "application/json") 

你可以尝试在handleFunc中添加它们

【讨论】：

就我而言，唯一需要的一个 FWIW 是：w.Header().Set("Access-Control-Allow-Origin", "*")