angular2连接SpringBoot遇到的坑

最新推荐文章于 2023-03-06 13:49:18 发布

miaokezhang

最新推荐文章于 2023-03-06 13:49:18 发布

阅读量705

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/miaokezhang/article/details/107068652

版权

学习专栏收录该内容

36 篇文章

订阅专栏

学习angular我是通过看官方文档学习的：https://angular.cn/docs
一开始看还是挺难理解的，虽然有写过vue，以为应该会差不多，但我错了，angular完全是另外一种框架。

阅读文档的坑

最开始看angular官方文档，花了一上午去硬啃那些概念，什么模块、组件啥的，发现蒙蔽的一批，直到练习后面的"试一试"案例，才对那些概念有点大概的理解。
在这里插入图片描述
所以建议先对着"试一试"案例敲一遍，对整个框架内容有个大体的印象，再去结合案例回顾上面的基本概念。

连接后台的坑

到后面的"英雄的案例"，在最后的"从服务端获取数据"部分，官方文档提供了一个模拟服务器，你在跟着步骤导入一些模块后，访问http://localhost:4200/heroes可以成功。
在这里插入图片描述
但坑就坑在这里，我在把"英雄"案例敲完后，尝试连接我SpringBoot启动的应用，一直报404，但用新的浏览器窗口访问又是可以的。

找了半天才发现，就是开始导入HttpClientInMemoryWebApiModule，InMemoryDataService的时候做了路由配置，导致所有的本地请求都会跑到模拟服务器上面去…
在这里插入图片描述
把这一块内容删除就可以了。

启动SpringBoot的坑

每次在maven添加依赖，一不小心就会导致启动狂报错，解决一个又来一个，而且百度也不一定能找到答案，这一次报的错是：
Cannot instantiate interface org.springframework.context.ApplicationContextInitializer : org.springframework.boot.context.ConfigurationWarningsApplicationContextInitializer。
是由于java.lang.NoSuchMethodError: 'boolean org.springframework.core.KotlinDetector.isKotlinReflectPresent()'所导致的。
百度后，找到一个靠谱的：https://www.cnblogs.com/vwater/p/10451097.html
因为pom.xml中引入了spring-boot-starter-web ，同时pom.xml也引入了spring-core，spring-beans，这里去掉spring-core，spring-beans即可。
确实pom文件里有spring-core配置，去掉后，还是依旧报错，然后继续百度找答案，最后大概知道是springframework.boot的版本问题，最好版本相同，然后找了下，把两个包含boot的依赖版本改成相同的，果然没有报错了。
在这里插入图片描述

访问接口遇到的坑

启动成功后，按道理来说，前后端算是都继续了，但在找SpringBoot启动时报错原因的时候，把跨域配置给删了，导致页面访问后台，后台没有报错，但数据就是到不了前端。
在这里插入图片描述
最后把跨域配置加上就ok了。


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * 对系统后台进行跨域访问进行配置
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")// 1 设置访问源地址
                .allowCredentials(true)// 2 设置访问源请求头
                .allowedMethods("GET", "POST", "DELETE", "PUT") // 3 设置访问源请求方法
                .maxAge(3600);
    }
//    @Bean
//    public CorsFilter corsFilter() {
//        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//        source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
//        return new CorsFilter(source);
//    }

}