react-app中通过proxy解决跨域问题

Z时代
2024-01-10
分类：综合

react

proxy代理原理是把本地 http://localhost:3000 端口的/api请求转发到了代理服务器比如 http://172.20.1.148:8082

proxy代理匹配 '/api' 的url

create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型，配置成如下：

"proxy": "http://172.20.1.148:8082"

但是它只能匹配 '/api' 的url，而且只能匹配一个代理

如果你想代理多个，看下面

proxy代理匹配多个的url

第一步：

安装 http-proxy-middleware 依赖

npm install --save-dev http-proxy-middleware

第二步：

在项目中 src 文件夹下新建文件 setupProxy.js ，写入如下代码

创建好这个文件之后，会自动的引用它，不需要额外的配置。不过代理想要生效，必须重新运行项目。

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/back', {
      target: 'http://172.20.1.148:8082',
      changeOrigin: true
    })
  )
  app.use(
    proxy('/common', {
      target: 'http://172.20.1.148:8082',
      changeOrigin: true
    })
  )
}