前端配置项目代理,一般是为了解决浏览器跨域策略,在umi中有非常方便的方式可以供我们快速配置代理。
在我的项目中配置代理也遇到了一个坑点,特此记录一下。
环境:
react:17.0.0
umi:3.5.0
开始
umi项目中,在项目根目录下创建一个config/config.js文件,或者在根目录下创建 .umirc.ts文件(注意.umirc.ts文件是以 英文符号 . 开头的,千万别写错)
如下图所示项目结构
写入配置:
// 注意: 这里我只写了代理的配置方法,其余配置可自己参考官方文档 umi配置文档https://v3.umijs.org/zh-CN/config#proxy
import {defineConfig} from 'umi';
export default defineConfig({
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {'^/api': ''},
},
}
});
解释:
1、可以看到我前端项目运行在 http://localhost:8000
2、代理服务的目标地址为 http://127.0.0.1:8080
3、现在只要匹配到以/api开头的请求,代理都会生效
4、最重要的一点:
这里的prefix: '/api',一定不可以写成http://.....开头!!!,否则不会走代理
有的项目中是通过baseUrl: '/api',配置的,可以根据个人项目实际情况配置
5、结果:前端项目代理生效,通过浏览器可以看到请求的端口是8000,但是实际上,请求被转发到8080端口中,越过了浏览器的跨域策略,完成跨域配置