【每天学一点-05】使用umi.js代理，解决跨域问题（前端）

一、user.ts 前端请求接口

import request from 'umi-request';

const getAway = '/user';

// 获取用户列表
export const getUserList = () => {
  return request.get(getAway + '/getUserList',{});
}

二、.umirc.ts 配置

import { defineConfig } from 'umi';

export default defineConfig({
  base: '/demo/', //路由前缀，string
  publicPath: '/demo/', //配置webpack的PublicPath
  devServer: {  //配置开发服务器
    port: 9099, //端口号
  },
  nodeModulesTransform: { //设置node_modules目录下依赖文件的编译方式
    type: 'none', //none默认编译或者all全部编译
  },
  proxy:{ //配置代理,仅在dev时生效
    'api':{ //标识需要进行转换请求的url
      'target': '', //服务端域名
      'changeOrigin': true, //允许域名进行转换
      'pathRewrite':{ '^/api':''}, //将请求url中的api去掉
    },
    '/user':{
      target: `http://localhost:8080/`,
      changeOrigin: true,
      pathRewrite: {'':''},
    }
  },
  layout:{},
  exportStatic:{},  //配置html的输出形式，默认值输出index.html
  dynamicImport:{}, //是否启用按需加载，即是否把构建产物进行拆分，在需要的时候下载额外的 JS 再执行。
  // favicon: '/demo/favicon.ico', //配置favicon地址
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {}, //快速刷新，开发时可以保持组件状态，同时编辑提供即时反馈
  history:{ //配置history类型和配置项，用于路由跳转、监听
    type: 'browser', //browser、hash、memory
  }
});

三、后端 Controller

package com.controller;

import com.bean.User;
import com.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.*;

@Controller  //控制器
@RequestMapping("user")
public class CUser {

    @Autowired
    UserService userService;

    @GetMapping("/getUserList")
    @ResponseBody //返回JSON数据
    public List<User> getUserList(){
        List<User> users = new ArrayList<User>();
        users = userService.getUserList();
        return users;
    }

}

四、大致流程

搜索

复制