Angular官方样例Tour of Heroes通过angular-in-memory-web-api来模拟实现远程调用对hero进行增删改查，本节对其修改调用上一节实现的接口。
一、在码云中创建项目heroes-web
二、下载Angular官方样例代码
三、安装依赖包,在项目所在文件夹的控制台（或cmd）中: npm install
四、关联git:
1、创建git创库: git init
2、关联远程创库：git remote add origin https://gitee.com/lxhjh2015/heroes-web.git
3、拉取代码到本地：git pull origin master
4、本地添加：git add .
5、本地提交：git commit -am "第一次提交"
6、推送代码：git push
7、为了记录本小节成果，建立本地分支: git checkout -b base
8、把本地分支上传到远程（远程创建分支）：git push origin base
9、切换回master分支:git checkout master
10、创建本节工作分支: git checkout -b first
11、把本节工作分支上传到远程: git push origin first
这样本地和远程，都分别有三个分支master、base、first
五、修改angular项目代码
angular项目代码，仅仅需要修改两个地方即可。
第一个地方,修改接口地址，把hero.service.ts文件中
private heroesUrl = 'api/heroes';修改为
private heroesUrl = 'http://192.168.33.154:8001/api/heroes';IP地址修改为你的电脑的ip
第二个地方，取消angular-in-memory-web-api启动，把app.module.ts文件中
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, { dataEncapsulation: false }
)这三行代码注释即可。
六、允许heroapi的cros跨域请求
angular项目代码修改之后，并不能立马实现接口调用，通过浏览器开发者工具查看网络请求，会发现“invalid cors request”。意思是springboot的cros项目存在跨域限制，我们要解决cros问题.
1、在pom.xml文件中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>2、添加包com.jh.heroes.api.web.config
3、添加安全配置类WebSecurityConfig，代码为
package com.jh.heroes.api.web.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
//关闭csrf,所有请求允许访问
http.cors().and().csrf().disable().authorizeRequests().anyRequest().permitAll();
}
}注：这个配置，关闭csrf，允许所有请求访问，不做任何限制。
4、添加cros配置类CorsConfiguration，代码为
package com.jh.heroes.api.web.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
}注：
A、这个配置最大限度的允许访问。
B、早期的springboot这个配置文件继承于WebMvcConfiugrationAdaper，现在WebMvcConfiugrationAdaper已经过期。在WebMvcConfiugrationAdaper文件中做了说明，我们应该直接实现WebMvcConfigurer.
七、git代码提交
经过对angular和springboot项目的简单修改，它们可以跑起来了。
1、在angular项目的控制台，进行如下操作
A、git commit -am "修改接口地址，项目启动时不启动HttpClientInMemoryWebApiModule"
B、推送代码：git push
C、 切换到master分支:git checkout master
D、 master分支合并first分支代码:git merge first
E、把master分支代码上传到远程:git push
F、建立新的工作分区: git checkout -b second
G、把本地分支上传到远程（远程创建分支）：git push origin second
2、在springboot项目的控制台，进行如下操作
A、git add .
B、git commit -am "增加cros及security基础配置"
C、推送代码：git push
D、 切换到master分支:git checkout master
E、 master分支合并first分支代码:git merge first
F、把master分支代码上传到远程:git push
G、建立新的工作分区: git checkout -b second
H、把本地分支上传到远程（远程创建分支）：git push origin second
八、小结
本节使angular官方项目连接到我们用springboot制作的接口，同时也解决了springboot项目的cros跨域的问题。
参考
1、http://blog.51cto.com/7308310/2072364
2、https://www.cnblogs.com/yuansc/p/9076604.html
3、https://www.cnblogs.com/shihaiming/p/8716830.html
4、https://docs.spring.io/spring-security/site/docs/5.0.7.RELEASE/reference/htmlsingle/#cors