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

Question

我在 localhost:3000 上运行一个 React 应用程序，在 localhost:8000 上运行一个 Go 服务器。

当我使用 fetch 从客户端发出请求时 - 响应是不透明的，所以我无法访问数据。

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

客户:

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: Response was received from a valid cross-origin request. Certain headers and the body may be accessed.

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

我明白了!

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

这里有 3 个关键点:

• 在客户端请求中设置mode为cors

• 将服务器上的 Access-Control-Allow-Origin header 设置为 *

• 在客户端的结果上调用 .json()，并在按照 promise ，您可以访问数据。

Answer 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中添加它们