create-react-app 配置代理

create-react-app 配置代理

1、安装插件 http-proxy-middleware

npm i http-proxy-middleware

2、在 src 目录下新建文件 setupProxy.js 文件

// 配置代理 - 用于联调
const { createProxyMiddleware } = require('http-proxy-middleware')
console.log('PROXY: ', process.env.PROXY_ENV)
​
module.exports = function (app) {
  if (process.env.PROXY_ENV === 'proxy') {
    app.use(
      createProxyMiddleware('/api', {
        target: 'http://localhost:8080/', 
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      })
    )
  }
}
​

因为我想通过一个变量来控制是否启用代理，因此可以添加一个环境变量 process.env.PROXY_ENV

3、修改 scripts/start.js 文件

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development'
process.env.NODE_ENV = 'development'
// 如果需要使用本地代理联调,则需要将 PROXY_ENV 改为 proxy
// process.env.PROXY_ENV = 'proxy'

但是光改这里还不行，在 setupProxy.js 文件中还是无法访问到 PROXY_ENV 变量，还需要修改 config/env.js

Ps：如果你没有这个文件，说明你还没执行 npm run eject ，这个命令会暴露出项目的webpack配置文件

4、修改 axios.js 文件，设置 baseURL 为 /api，这样代理才能拦截到请求URL

5、修改 src/index.js 文件

在开发环境并且未开启代理时，才引用mockjs

完成上述配置后，就可以通过环境变量 process.env.PROXY_ENV 来控制代理的开关了，修改代理后需要运行 npm start 重启项目