Vue + SpringBoot 当前端出现跨域问题时，解决跨域问题

 Springboot跨域设置

在springboot项目里新建配置文件CorsConfig.java，注意需要重启

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

vue设置跨域

在vue项目里新建配置文件vue.config.js

//跨域配置
module.exports = {
    devServer: {   //设置本地默认端口
        port: 8080,
        proxy: {   //设置代理
            '/api': {     //设置拦截器
                target: 'http://localhost:9090',    //代理目标地址
                changeOrigin: true,   //是否设置同源
                pathRewrite: {        //路径重写
                    '/api': ''           //选择忽略拦截器里面的单词
                }
            }
        }
    }
}