前后端分离实现跨域配置

前后端分离实现跨域配置

1、修改前端配置

1.修改.env.development文件

NODE_ENV=development
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=http://localhost:8080/

• 其中8080是需要请求的端口号
  

2.删除main.js的mock数据挂载，在src目录下打开main.js文件，将import './mock’代码注释

2、接着修改后端内容

• 有两中配置方式

  • 注解
  • 配置类

• 个人建议使用配置类，因为配置类只需要配置一次，对所有的controller层都有效，但是使用注解方式，需要每个controller都进行配置，虽然繁琐，但是比较灵活。

1.配置类

• 创建config包，创建corsconfig类进行配置，该类为跨域配置类（相关只是了解springboot的自动装配原理）

@Configuration
public class corsconfig {

    @Configuration
    public class CorsConfig {
        private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            //  你需要跨域的地址  注意这里的 127.0.0.1 != localhost
            // * 表示对所有的地址都可以访问
            corsConfiguration.addAllowedOriginPattern("*");
            //  跨域的请求头
            corsConfiguration.addAllowedHeader("*"); // 2
            //  跨域的请求方法
            corsConfiguration.addAllowedMethod("*"); // 3
            //加上了这一句，大致意思是可以携带 cookie
            //最终的结果是可以 在跨域请求的时候获取同一个 session
            corsConfiguration.setAllowCredentials(true);
            return corsConfiguration;
        }

        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            //配置 可以访问的地址
            source.registerCorsConfiguration("/**", buildConfig()); // 4
            return new CorsFilter(source);
        }
    }
}

• 注意：由于版本不同，api会有所更改， 报错的话

  corsConfiguration.addAllowedOriginPattern("*");
  

  改为：

  corsConfiguration.addAllowedOrigin("*");
  

2.注解方式

• 在controller类上添加

  @CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
  

3、注解和配置类的优缺点

• 使用配置类，能进行所有controller类进行配置，全局的。
• 使用注解方式需要对每个comtroller进行单独配置，但能调整每个配置。