[JavaScript知识库]06_React配置代理proxy（实现跨域请求）

React配置代理proxy（实现跨域请求）

方法一：直接在package.json中设置proxy属性

我们可以在package.json中直接添加这样的字段"proxy": "http://172.16.136.249:8080"

这和Vue的配置有点不同，他好像不太需要过多的设置，而是简简单单的一个字符串即可。但他有个大缺点——不能配置多个代理。

下面的方法二就是解决这个问题
的，也是比较推荐使用的

方法二：建立setupProxy.js，注意必须是这个文件名

我们使用这个方法时，需要在项目中安装middleware

yarn add http-proxy-middleware --save
或
npm install http-proxy-middleware --save

安装middleware插件后，在src目录中新建setupProxy.js文件，在文件中放入如下代码:

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
        target: 'http://172.16.136.249:8080',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          	"^/api": "/api"
    	}
    }),
    createProxyMiddleware('/api2', {
        target: 'http://172.16.136.249:5000',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          	"^/api2": "/api2"
    	}
    })
  )
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖