- 在papackage.json里配置(目前不推荐了)
//方法一：create-react-app脚手架低于2.0版本时候，可以使用对象类型，否则会报错
//后面2项（pathRewrite，secure）可以不写
"proxy":{
"/api":{
"target":"http://m.kugo.com",//目标服务器
"changeOrigin": true//默认false，是否需要改变原始主机头为目标URL
"pathRewrite": {"^/api" : "/"},// 重写请求，比如我们源访问的是api，那么请求会被解析为/
"secure": false, //如果是https接口 需要配置这个参数为true
}
}
//方法二：最新的create-react-app脚手架2.0版本以上只能配置string类型
"proxy": "http://m.kugo.com",
- 最好的方式可以通过middleware中间件进行配置（Creact React App脚手架官网推荐方法，可以配置多个代理）
//方法三：
//1.先安装http-proxy-middleware
npm install http-proxy-middleware --save
//2.然后在src目录下创建 setupProxy.js 文件
//3.最后设置代理（setupProxy.js文件内容）
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api', { //`api`是需要转发的请求
target: 'http://localhost:5000', // 这里是接口服务器地址
changeOrigin: true,
})
)
}
这里需要注意的是我们的axios的baseURL，设置的时候不能还设置加上原来服务器域名的地址，应该只设置 /api 就好了
axios.defaults.baseURL = '/api';
一般下载的新脚手架的项目根目录中没有config文件夹,暴露出项目配置文件，项目下执行:
npm run eject
用方法三配置完后要重启代码,结果遇见了问题
proxy is not a function,打印proxy，发现真的不是函数。而是一个对象,可能是官网demo写的早，proxy这个插件经过了修改？那咱也改！
既然导出的对象里createProxyMiddleware是个函数，那就用这个函数调用不就得了。
WeChat38d0bd96d84e21f5cfd02d19fff620b0.png
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy.createProxyMiddleware('/api', { //`api`是需要转发的请求
target: 'https://www.baidu.com/', // 这里是接口服务器地址
changeOrigin: true,
pathRewrite: {'^/api': ''}
})
)
}
