springBoot 结合 Vue项目跨域问题

问题：解决开发过程中springBoot 结合 Vue项目跨域问题

解决方法：

1. 在springBoot项目中添加一个配置类

   package com.xianheng;
   
   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;
   
   /**
    * 由于使用vue + springBoot开发前后端完全分离的项目，因此需要解决跨域问题。
    * 此配置类作用：实现允许跨域功能
    */
   @Configuration
   public class CorsConfig {
   
       private CorsConfiguration buildConfig() {
           CorsConfiguration corsConfiguration = new CorsConfiguration();
           corsConfiguration.addAllowedOrigin("*"); //允许任何域名
           corsConfiguration.addAllowedHeader("*"); //允许任何头
           corsConfiguration.addAllowedMethod("*"); //允许任何方法
   
           corsConfiguration.setAllowCredentials(true);
           return corsConfiguration;
       }
   
       @Bean
       public CorsFilter corsFilter() {
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           source.registerCorsConfiguration("/**", buildConfig()); //注册
           return new CorsFilter(source);
       }
   }

2. 在vue项目中config目录下的index.js文件添加以下配置

   proxyTable: {
         '/api': {
           target: 'http://127.0.0.1:8888',
           changeOrigin: true,
           pathRewrite: {
             '^/api': ''
           }
         },
       }

   target：表示后台的地址。在api中直接使用/api代替后台地址