当前位置：首页 > React

React中如何引入koa

2026-01-24 05:16:36React

React 中引入 Koa 的方法

React 是前端框架，而 Koa 是 Node.js 的后端框架。通常两者结合使用时，React 作为前端应用运行在浏览器中，Koa 作为后端服务提供 API 接口。以下是常见的集成方法：

创建 Koa 后端服务

在项目根目录下创建 server 文件夹，初始化 Koa 项目并安装依赖：

mkdir server
cd server
npm init -y
npm install koa @koa/router koa-bodyparser

编写 Koa 服务代码（server/index.js）：

const Koa = require('koa');
const Router = require('@koa/router');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();

router.get('/api/data', (ctx) => {
  ctx.body = { message: 'Hello from Koa!' };
});

app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`Koa server running on http://localhost:${PORT}`);
});

React 前端调用 Koa API

在 React 项目中，通过 fetch 或 axios 调用 Koa 提供的 API：

React中如何引入koa

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

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:3001/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
}

export default App;

配置代理解决跨域问题

在开发环境中，修改 React 的 package.json 添加代理配置：

"proxy": "http://localhost:3001"

或通过 create-react-app 的 setupProxy.js 配置：

React中如何引入koa

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

生产环境部署

构建 React 应用并将静态文件托管在 Koa 中：

const path = require('path');
const serve = require('koa-static');

app.use(serve(path.join(__dirname, '../client/build')));

app.use(async (ctx) => {
  ctx.body = path.join(__dirname, '../client/build/index.html');
});

运行 React 构建命令：