如何解决React的Cannot GET /错误？使用createProxyMiddleware遇问题

你的代码仅配置了/api路径的代理规则，但Express服务器未处理根路径/的请求，直接访问http://localhost:3000/时，找不到对应路由逻辑，因此返回Cannot GET /错误。

你的代码如下：

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

const app = express();

const apiProxy = createProxyMiddleware('/api', { 
  target: 'http://themis-server.test.seewo.com', 
});

app.use('/api', apiProxy);
app.listen(3000);

解决办法分两种场景： #

场景1：提供本地静态页面 #

如果需要通过Express托管本地静态文件（如HTML、CSS、JS），添加express.static中间件指定静态文件目录。假设静态文件放在项目根目录的public文件夹下，修改代码如下：

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

const app = express();

// 托管public目录下的静态资源
app.use(express.static('public'));

const apiProxy = createProxyMiddleware('/api', { 
  target: 'http://themis-server.test.seewo.com', 
});

app.use('/api', apiProxy);
app.listen(3000);

此时访问http://localhost:3000/会自动加载public目录下的index.html（若存在）。

场景2：代理根路径到目标服务器 #

如果需要把根路径请求也转发到目标服务器，新增根路径代理配置，同时建议添加changeOrigin参数避免跨域问题：

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

const app = express();

const apiProxy = createProxyMiddleware('/api', { 
  target: 'http://themis-server.test.seewo.com', 
});

// 代理根路径到目标服务器
const rootProxy = createProxyMiddleware('/', { 
  target: 'http://themis-server.test.seewo.com',
  changeOrigin: true
});

app.use('/api', apiProxy);
app.use('/', rootProxy);
app.listen(3000);

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