前后端分离-跨域问题解决

一、目标controller控制器类上添加@CrossOrigin注解即可

@RestController
@CrossOrigin //解决跨域
@RequestMapping("index/user")
public class IndexController {

    //login登录接口
    @PostMapping("login")
    public Result login(){
        return Result.ok().data("token", "admin");
    }

    //info获取当前用户登录信息
    @GetMapping("info")
    public Result info(){
        return Result.ok().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80");
    }

}

二、定义统一跨域解决配置类

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 CustomCorsConfiguration {

    // 导入Cors的过滤器,在配置文件中进行配置
    @Bean
    public CorsFilter corsFilter(){

        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();

        // 设置允许跨域的域名,如果允许携带cookie的话,路径就不能写*号, *表示所有的域名都可以跨域访问
        configuration.addAllowedOrigin("http://127.0.0.1:5500");
        // 设置跨域访问可以携带cookie
        configuration.setAllowCredentials(true);
        // 允许所有的请求方法 ==> GET POST PUT Delete
        configuration.addAllowedMethod("*");
        // 允许携带任何头信息
        configuration.addAllowedHeader("*");

        // 初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();

        // 给配置源对象设置过滤的参数
        // 参数一: 过滤的路径 == > 所有的路径都要求校验是否跨域
        // 参数二: 配置类
        configurationSource.registerCorsConfiguration("/**", configuration);

        // 返回配置好的过滤器
        return new CorsFilter(configurationSource);
    }
}

三、前端配置代理服务器vue.config.js

    //before: require('./mock/mock-server.js') //取消请求mock
    //定义代理服务器
    proxy: {
      '/dev-api': { //匹配所有以 '/dev-api'开头的请求路径
        target: 'http://localhost:8001', //访问目标后台服务
        changeOrigin: true, //支持跨域
        pathRewrite: { //重写路径，去掉路径中开头的'/dev-api'
          '^/dev-api': '' //换成''空字符串
        }
      }
    }

四、网关解决

......