React umi处理跨域问题,proxy代理

开发很多时候拿到接口请求的时候，经常出现跨域问题，个人发现umi有方法可以解决

//官方方法创建umi项目,记得 yarn 初始化依赖
yarn create @umijs/umi-app

yarn start后,可以看到一个文件,叫 .umirc.ts ,可以在这里配置路由,设置logo等一系列操作,具体你们去看看官方文档.

打开.umirc.ts 文件后,在export default defineConfig({}) 里面设置proxy代理,具体设置如下:

//.umirc.ts界面
import { defineConfig } from 'umi';
//配置
export default defineConfig({
    nodeModulesTransform: {
        type: 'none',
      },
      
    title: '设置页面上的title',
    
    //配置路由
    routes: [ 
     { path: '/', component: '@/pages/home/index' }, //默认路径,打开页面就显示
     {
       path: '/myhome',
       name: '个人',
       component: '@/pages/myhome/index',
     },
   ],
   
   //配置跨域proxy代理
   proxy: {
    '/ci': { //ci可以自定义名称
      'target': 'http://10.0.0.101:8080/', //这是 服务端域名
      'changeOrigin': true,  //允许域名进行转换
      'pathRewrite': { '^/ci': '' }, //将请求url里的ci去掉
    },
  },
});

以上就是proxy配置,你把请求的接口替换成http://10.0.0.101:8080/ci/xxx/xxx就行

如果是config.js文件,处理方法也是一样的

如有不足之处,欢迎各位大佬指出来,谢谢!