springboot-vue项目解决跨域问题

springboot 整合 vue 项目时一定会出现跨域问题

解决（前后端一起配置解决）

 

后端

新建一个corsConfig 类，目录结构如图

 

代码如下：(可直接复制使用)

//跨域使用
package com.example.demo.config;
​
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
​
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

​
​

前端

在根目录下创建vue.config.js（一般会有两个 config.js）

 

在 vue.config.js 中写入如下代码

​
module.exports = {
    devServer: {
        proxy: {
            '/api': {//表示拦截以/api开头的请求路径
                target: 'http://（这里填你项目真实的后端地址）',
                changOrigin: true,//是否开启跨域
                pathRewrite: {
                    '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
                }
            }
        }
    }
}
​

​

找到 baseUrl (一般是在base.js)

axios.defaults.baseURL='api'

总结：

这些操作会将原本的项目路径变成 /api/*

所以在后端上 类上看见写上 @RequestMapping("/api") 就是为了解决跨域问题