后端解决跨域问题

直接访问服务端的情况

在Controller上添加 @CrossOrigin 注解

直接在Controller类上添加 @CrossOrigin 注解即可解决跨域问题

添加过滤器类配置

@Bean
public CorsFilter corsFilter() {
    // 配置封装类
    CorsConfiguration config = new CorsConfiguration();
    // 允许所有来源的请求
    config.addAllowedOrigin("*");
    config.setAllowCredentials(true);
    // 允许所有请求方式
    config.addAllowedMethod("*");
    // 允许所有头
    config.addAllowedHeader("*");
    // 跨域配置源
    UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
    // 任意请求路径都允许上面配置的跨域策略
    configSource.registerCorsConfiguration("/**", config);
    return new CorsFilter(configSource);
}

引入了网关（Gateway）

如果引入了Gateway网关，必须确定是由网关统一做跨域请求处理还是由具体的服务端解决，二者选其一即可

如果服务端和网关中都配置了解决跨域问题策略，那么请求时会出现 The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘*, *‘, but only one is allowed. 错误或者警告，这是因为跨域策略在响应头中被设置了两次：经过网关设置了一次，到达具体的服务端时又被设置了一次

前端解决跨域问题（Vue）

修改 vue.config.js ，做如下处理：

...
// 设置请求代理，解决前端跨域问题
proxy: {
    ‘/api‘: {
      target: ‘https://api.baidubce.com‘, // 你请求的第三方接口
      changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      pathRewrite: { // 路径重写
        ‘^/api‘: ‘‘ // 将/api替换为target中的请求地址
      }
    }
  }
  ...

跨域问题总结