SpringBoot + Vue 的跨域及通信

上一篇：Ubuntu 下搭建 Nginx 部署 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 方法。

    @Configuration
    public class WebConfig implements WebMvcConfigurer {

        @Override
        public 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 。必须为 true
        wx: 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 {

    @Autowired
    IUserService 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);
    }
}