如何将Go后端API响应传递至React前端？

嘿，刚入门Go后端就写出了API，真的很棒！要把数据传到React前端其实没那么复杂，核心就解决两个关键点：跨域问题和前端发起请求获取数据，我一步步给你讲清楚：

第一步：解决Go后端的跨域问题 #

因为你的Go后端跑在http://localhost:3000，而React项目默认端口也是3000（或者你可能会改成其他端口），前后端域名/端口不同会触发浏览器的跨域拦截，所以我们得给Go后端加个CORS中间件：

首先安装gorilla的handlers包：

go get github.com/gorilla/handlers

然后修改你的Go代码，给router加上CORS配置：

package main

import (
	"encoding/json"
	"log"
	"net/http"

	"github.com/gorilla/handlers"
	"github.com/gorilla/mux"
)

type Author struct {
	FirstName string `json:"firstName"`
	LastName  string `json:"lastName"`
}

type Book struct {
	ID     string  `json:"id"`
	Isbn   string  `json:"isbn"`
	Title  string  `json:"title"`
	Author *Author `json:"author"`
}

var books []Book

func main() {
	r := mux.NewRouter()

	// 初始化书籍数据
	books = append(books, []Book{
		{
			ID:    "1",
			Isbn:  "23423",
			Title: "Book 1",
			Author: &Author{
				FirstName: "Nas",
				LastName:  "Ahm",
			},
		},
		{
			ID:    "2",
			Isbn:  "97878",
			Title: "Book 2",
			Author: &Author{
				FirstName: "Has",
				LastName:  "Ahm",
			},
		},
	}...)

	// 配置CORS：开发环境允许所有前端域名，生产环境要指定具体域名
	corsOpts := handlers.CORS(
		handlers.AllowedOrigins([]string{"*"}),
		handlers.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}),
		handlers.AllowedHeaders([]string{"Content-Type", "Authorization"}),
	)

	// 注册路由
	r.HandleFunc("/api/books", getBooks).Methods("GET")

	// 用CORS中间件包装router后启动服务
	log.Fatal(http.ListenAndServe(":3000", corsOpts(r)))
}

func getBooks(writer http.ResponseWriter, request *http.Request) {
	writer.Header().Set("Content-Type", "application/json")
	json.NewEncoder(writer).Encode(books)
}

这样你的后端就允许前端发起跨域请求了。

第二步：React前端请求数据 #

接下来在React项目里写一个组件，发起GET请求获取书籍数据并展示：

方法1：用原生fetch API #

import { useState, useEffect } from 'react';

function BookList() {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 发起请求到Go后端的API地址
    fetch('http://localhost:3000/api/books')
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败');
        }
        return response.json();
      })
      .then(data => {
        setBooks(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('获取数据出错:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h2>书籍列表</h2>
      <ul>
        {books.map(book => (
          <li key={book.id}>
            <h3>{book.title}</h3>
            <p>ISBN: {book.isbn}</p>
            <p>作者: {book.author.firstName} {book.author.lastName}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BookList;

方法2：用axios（更简洁） #

先安装axios：

npm install axios

然后写组件：

import { useState, useEffect } from 'react';
import axios from 'axios';

function BookList() {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('http://localhost:3000/api/books')
      .then(response => {
        setBooks(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('获取数据出错:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h2>书籍列表</h2>
      <ul>
        {books.map(book => (
          <li key={book.id}>
            <h3>{book.title}</h3>
            <p>ISBN: {book.isbn}</p>
            <p>作者: {book.author.firstName} {book.author.lastName}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BookList;

第三步：测试运行 #

1. 先启动你的Go后端：go run main.go
2. 启动React项目：npm start（如果React默认端口和Go冲突，可以在package.json里改端口，比如把start脚本改成"start": "PORT=3001 react-scripts start"）
3. 打开React项目的页面，就能看到从Go后端获取的书籍列表啦！

⚠️ 注意：生产环境不要用AllowedOrigins([]string{"*"})，要指定你的前端域名（比如["https://your-frontend-domain.com"]），这样更安全。

内容的提问来源于stack exchange，提问作者Ling ling