SpringBoot + Vue 的跨域及通信

编程入门行业动态更新时间:2024-10-06 16:16:47

SpringBoot + Vue 的跨域及<a href=https://www.elefans.com/category/jswz/34/1769529.html style= 通信"/>

SpringBoot + Vue 的跨域及通信

SpringBoot + Vue 的跨域及通信（开发环境）

上一篇：Ubuntu 下搭建 Nginx 部署 Vue

下一篇：Ubuntu 下配置 Nginx 解决部署环境下 SpringBoot + Vue 的跨域及通信

紧接上一篇，Spring + Vue 项目都部署在了 Ubuntu 系统的 Nginx 下，接下来就要实现前后端的通信了。

第一步（外篇）：Vscode 应对 Eslint 和 Prettier 的冲突

这一步是针对 vscode 的新用户而言。我是使用 vscode 打开的前端 vue 项目，而因为是新下载的编辑器，都是默认配置。 vue-element-admin 是引入了 eslint 来规范化代码的。

所以，首先要下载 3 个插件：

vetur： vue 语法的识别
prettier：格式化插件
eslint：规范化插件

默认情况下，eslint 的格式化是和 prettier 冲突的，所以，格式化插件选择 prettier（使用格式化快捷键时会弹出选项），然后，将 setting.json 修改为如下配置（这应该是最精简的配置了，只包含格式化和规范化相关的配置）：

{"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},//"editor.formatOnSave": true,"editor.formatOnSave": false,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"prettier.singleQuote": true,"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

第二步：解决跨域问题

跨域问题在很久之前有写过一篇文章介绍过： Node.JS跨域请求配置。

这里只说明一下 SpringBoot + Vue 项目的跨域问题如何解决。

通常有三个方向：后端解决（SpringBoot）、前端解决（vue）和服务器解决（Nginx）。

SpringBoot 解决跨域有两种方法

在方法或者类（控制器）上添加 @CrossOrigin 注解。（粒度叫细，适合特定方法支持跨域的需求）

配置 Config 文件，实现 WebMvcConfigurer 接口，实现 addCorsMappings 方法。

    @Configurationpublic class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "POST", "DELETE", "PUT").allowedHeaders(*).maxAge(3600 * 24);}}

vue 解决跨域（目前最常用）【本次采用】

以下：所有修改完 config 或者其他配置文件，一定要 ctrl+C 终止项目，npm run dev 重新启动

在 vue 项目根目录下，找到 vue.config.js 配置文件，打开配置文件，找到 devServer 属性，配置如下代码

devServer: {port: port,     // Vue 项目运行的端口。默认已配置，这里不需要更改open: true,     // Vue 项目启动即时打开浏览器预览，这里不需要更改// 重点：配置代理解决跨域问题proxy: {// 这里的 /* 是正则匹配，* 的意思是所有，意为匹配所有 以斜杠 开头的 请求，代理到 target 目标'/*': { target: process.env.VUE_APP_BASE_API,   // 目标服务器（就是服务器 url）// secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, // host 设为 target 。必须为 truewx: true, // 如果要代理 websockets，配置这个参数pathRewrite: {  // 重写路径}}
},

设置完代理，还有很重要的一步，在往下看两三行左右，同样在 devServer 里面：
```
// before: require('./mock/mock-server.js')
```
- 切记，如果连接了后台，不需要使用 mock 了，一定将这句话屏蔽掉，或者如果还需要继续使用，将其改为 after
- 否则，发送后台请求很容易会报错 TimeOut Of xxxms

配置完代理之后，记得要将原项目中 utils/request.js 文件中的 baseURL 清空，因为请求的 URL 从代理中跳转，不需要这里拼接了。

// create an axios instance
const service = axios.create({
baseURL: '', // process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})

Nginx 解决跨域（未测试过），修改配置文件如下：

location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;if ($request_method = 'OPTIONS') {return 204;}
}

第三步：适配 `vue-element-admin` 项目

配置完成代理之后，理应可以正常访问后端接口了，但点击登录之后，依然报错。

debugger 查看一下，发现：

2021-07-20_221139.png

因为前端是直接下载的 vue-element-admin ，是一个成熟的框架，而后端 SpringBoot 代码还没有开始写，所以，建议适配前端。

仔细研读 request.js 的代码。

在 SpringBoot 中，新建一个 Result 类

@Data
@AllArgsConstructor
public class Result<T> {private int code;private String message;private T data;
}

控制器修改为（大概代码如下，后续会进行封装处理，但对这里来说不重要）：

@RestController
@RequestMapping("user")
public class UserController {@AutowiredIUserService userService;@GetMapping("queryInfo")public Result<UserVo> queryInfo(@ModelAttribute UserDto userDto){User user = userService.queryInfo(userDto).orElse(new User());UserVo userVo = new UserVo();BeanUtils.copyProperties(user, userVo);return new Result<UserVo>(20000, "Success", userVo);}
}