【每天学一点-05】使用umi.js代理,解决跨域问题(前端)
阅读原文时间:2023年07月10日阅读:1

一、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;  
}

}

四、大致流程

搜索

复制