SpringBoot + VUE 项目中解决跨域问题三种方法

一、 启动前后端

二、前端访问后端接口

2.1 前端相关代码

<template>
  <div class="hello">
    <button @click="testCross">点我请求</button>
  </div>
</template>

import axios from "axios";


methods:{
    testCross(){
      axios.get("http://localhost:9090/testCross").then((res)=>{
        console.log(res)
      })
    }
  }

 2.2 后端相关代码

@RestController
@RequestMapping("/testCross")
public class TestCross {

    @GetMapping
    public List<String> testCross(){
        ArrayList<String> list = new ArrayList<>();
        list.add("AAA");
        list.add("BBB");
        list.add("CCC");
        return list;
    }
}

三、 前端访问后端接口报错

 四、解决方案

4.1 方案一（在目标方法上添加注解：@CrossOrigin）重启项目

 @GetMapping
    @CrossOrigin
    public List<String> testCross(){
        ArrayList<String> list = new ArrayList<>();
        list.add("AAA");
        list.add("BBB");
        list.add("CCC");
        return list;
    }

 4.2 方案二（注意：千万不要导错包）

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;
/**
 * @ClassName CrossConfig
 * @Description Cross过滤器
 * @Date 2022/3/25 11:22
 * @Version 1.0
 **/
@Configuration
public class CrossConfig {
    @Bean
    public CorsFilter corsFilter(){
        //1. 创建CorsConfiguration对象
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");//设置允许那些域来访问，*是通配符，允许所有域
        corsConfiguration.addAllowedHeader("*");//请求头字段
        corsConfiguration.addAllowedMethod("*");//请求方式(GET,POST,DELETE,PUT)
        //设置source
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);//1.映射路径 2.传入CorsConfiguration对象
        return new CorsFilter(source);
    }
}

4.3 方案三（实现WebMvcConfigurer接口，重写它的addCorsMappings方法）

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @ClassName CrossConfiguration
 * @Date 2022/3/25 11:36
 * @Version 1.0
 **/
@Configuration
public class CrossConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//配置映射
                .allowedOriginPatterns("*")//设置允许那些域来访问
                .allowedHeaders("*")//请求头字段
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")//请求方式(GET,POST,DELETE,PUT)
                .allowCredentials(true)//是否允许携带cookie
                .maxAge(3600);//设置3600秒，表示3600秒之内浏览器不必再次询问

    }
}