react配置多个代理，解决axios请求跨域问题

酷jjs

于 2021-10-26 16:17:31 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏： axios 前端笔记文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_32584661/article/details/120974502

前端笔记同时被 2 个专栏收录

165 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

该博客介绍了如何在src文件夹下创建setupProxy.js，利用http-proxy-middleware库设置多个API代理。通过配置，当请求遇到/api和/api2前缀时，分别代理到localhost:7001和localhost:7002。这种方法的优点在于可以灵活配置多个目标地址，但缺点是所有API请求必须加上特定前缀。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法：在src文件夹下创建setupProxy.js文件

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    //遇见api前缀，走代理
    proxy('/api',
      {
        target: 'http://localhost:7001',  //目标地址
        pathRewrite: { '^/api': '', },
        changeOrigin: true,  //控制服务器收到的响应头中Host字段的值
        secure: false, // 是否验证证书
        ws: true, // 启用websocket
      }),
    //遇见api前缀，走代理
    proxy('/api2',
      {
        target: 'http://localhost:7002',  //目标地址
        pathRewrite: { '^/api2': '', },
        changeOrigin: true,  //控制服务器收到的响应头中Host字段的值
        secure: false, // 是否验证证书
        ws: true, // 启用websocket
      }),
  );
};

优点：

可以灵活配置多个代理

缺点：

必须加前缀