记http-proxy-middleware在create-react-app中的使用

940 阅读1分钟
  • 安装

Notes:

该中间件只在开发时候会用到,所以安装到devDependencies,不会打包到项目中;

项目上线应该到nginx服务器上配置

//该中间件只在开发时会用到,所以安装到devDependencies,不会打包到项目中;
//项目上线应该到nginx服务器中配置转发代理

npm install --save-dev http-proxy-middleware
  • 使用

在src文件夹下创建setupProxy.js,在node_modules中react-scripts包中,有一个webpack.config.js文件。

其中有这样一串代码,可以确定配置文件的名称与位置

‘!**/src/setupProxy.*’

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

   module.exports = function(app) {  

   app.use(createProxyMiddleware('/portal', {  
           target: 'http: 106.75.95.89:90008' 
       }));
   }

   app.use可以配置多个域;

遇到的问题与疑惑

在http-proxy-middleware官网与gitHub中的写法如下:

   const express = require('express');

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

   const app = express();

   app.use('/api', 
          createProxyMiddleware(
             { 
                   target: 'http://www.example.org',
                   changeOrigin: true 
             })
          );

   app.listen(3000);



没有像以上的用法,app是通过moudle暴露出来的,而是通过express生成的,我按照官方的写法,报错了;
报的require(...) is not a function

我在网上也没有搜到类似的问题;我看了node_moduleshttp-proxy-middleware 包中的pakage.json文件中
看到这个包已经引入过express了; 目前分不清官网写法与module.exports写法有什么不一样,如果有哪位大神知道是什么原理的,
一定带带我这个菜鸡,目前react还在摸索中,感谢!!!