create

admin管理员组

文章数量:1122852

create

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 重启项目

本文标签： create