react关于跨域配置代理

最新推荐文章于 2025-02-13 09:57:09 发布

原创最新推荐文章于 2025-02-13 09:57:09 发布 · 520 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍如何在src目录下通过创建setupProxy.js文件实现对两个不同端口的服务进行代理配置。使用http-proxy-middleware库来轻松设置代理，分别针对/api1和/api2路径将请求转发到不同的本地服务。

在src下创建setupProxy.js文件实现配置多个代理

const { createProxyMiddleware } = require("http-proxy-middleware")
   
module.exports = function(app) {
  app.use(
    '/api1',
    createProxyMiddleware({
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: {
            '^/api1': '',
        }
    })
  );
  app.use(
      '/api2',
      createProxyMiddleware({
          target: 'http://localhost:5001',
          changeOrigin: true,
          pathRewrite: {
              '^/api2': '',
          }
      })
    )
}