Spring Boot CORS 教程 · ZetCode 中文系列教程

{% raw %} # Spring Boot CORS 教程 > 原文： [http://zetcode.com/springboot/cors/](http://zetcode.com/springboot/cors/) Spring Boot CORS 教程显示了如何在 Spring Boot 应用中设置跨域资源共享。 ## CORS 跨域资源共享（CORS）是一种安全策略，它使用 HTTP 标头来告诉浏览器，让运行在一个来源（域）上的 Web 应用有权访问来自另一个来源的服务器中的选定资源。网页可以嵌入跨域图像，样式表，脚本，`iframe`和视频。默认情况下，同源安全策略禁止某些跨域请求，尤其是 Ajax 请求。 `XMLHttpRequest`和 Fetch API 遵循同源策略。因此; 使用这些 API 的 Web 应用只能从加载应用的相同来源请求 HTTP 资源，除非来自其他来源的响应包括正确的 CORS 标头。 ## Spring Boot CORS 示例以下 Spring Boot 应用将 Angular 用作前端。 Angular SPA 在`localhost:4200`上运行，并向在`localhost:8080`上运行的 Spring Boot 后端发出请求。为此，我们需要在 Spring Boot 应用中启用 CORS。 ## Spring Boot 后端后端将在 Spring Boot 中创建。 ```java pom.xml src ├───main │ ├───java │ │ └───com │ │ └───zetcode │ │ │ Application.java │ │ │ MyRunner.java │ │ ├───config │ │ │ AppConf.java │ │ ├───controller │ │ │ MyController.java │ │ ├───model │ │ │ City.java │ │ └───repository │ │ CityRepository.java │ └───resources │ │ application.properties │ └───static │ index.html └───test └───java ``` 这是项目结构。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>corsex</artifactId> <version>1.0-SNAPSHOT</version> <packaging>jar</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> </properties> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.5.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> ``` 这是 Maven 构建文件。 `resources/application.properties` ```java spring.main.banner-mode=off ``` `application.properties`是主要的 Spring Boot 配置文件。使用`spring.main.banner-mode`属性，我们可以关闭 Spring 横幅。 `com/zetcode/model/City.java` ```java package com.zetcode.model; import java.util.Objects; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name = "cities") public class City { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String name; private int population; public City() { } public City(String name, int population) { this.name = name; this.population = population; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPopulation() { return population; } public void setPopulation(int population) { this.population = population; } @Override public int hashCode() { int hash = 7; hash = 79 * hash + Objects.hashCode(this.id); hash = 79 * hash + Objects.hashCode(this.name); hash = 79 * hash + this.population; return hash; } @Override public boolean equals(Object obj) { if (this == obj) { return true; } if (obj == null) { return false; } if (getClass() != obj.getClass()) { return false; } final City other = (City) obj; if (this.population != other.population) { return false; } if (!Objects.equals(this.name, other.name)) { return false; } return Objects.equals(this.id, other.id); } @Override public String toString() { var builder = new StringBuilder(); builder.append("City{id=").append(id).append(", name=") .append(name).append(", population=") .append(population).append("}"); return builder.toString(); } } ``` 这是`City`实体。它包含以下属性：`id`，`name`和`population`。 `com/zetcode/repository/CityRepository.java` ```java package com.zetcode.repository; import com.zetcode.model.City; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; @Repository public interface CityRepository extends JpaRepository<City, Long> { } ``` `CityRepository`从`JpaRepository`延伸。它提供了实体的类型及其主键。 `com/zetcode/controller/MyController.java` ```java package com.zetcode.controller; import com.zetcode.model.City; import com.zetcode.repository.CityRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController public class MyController { @Autowired private CityRepository cityRepository; @GetMapping(value = "/cities") public List<City> cities() { return cityRepository.findAll(); } } ``` 在`MyController`中，我们有一个返回所有城市的端点。 > **注意**：在Java企业应用中，定义与存储库一起使用的服务层是一个好习惯。为简单起见，我们跳过服务层。 `com/zetcode/conf/AppConf.java` ```java package com.zetcode.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 AppConf implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:4200") .allowedMethods("GET"); } } ``` 使用`CorsRegistry`，我们启用 CORS。我们设置允许的来源和请求方法。 `com/zetcode/MyRunner.java` ```java package com.zetcode; import com.zetcode.model.City; import com.zetcode.repository.CityRepository; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.CommandLineRunner; import org.springframework.stereotype.Component; @Component public class MyRunner implements CommandLineRunner { private static final Logger logger = LoggerFactory.getLogger(MyRunner.class); @Autowired private CityRepository cityRepository; @Override public void run(String... args) throws Exception { logger.info("Saving cities"); cityRepository.save(new City("Bratislava", 432000)); cityRepository.save(new City("Budapest", 1759000)); cityRepository.save(new City("Prague", 1280000)); cityRepository.save(new City("Warsaw", 1748000)); cityRepository.save(new City("Los Angeles", 3971000)); cityRepository.save(new City("New York", 8550000)); cityRepository.save(new City("Edinburgh", 464000)); } } ``` 在`MyRunner`中，我们将数据添加到内存 H2 数据库中。 `resources/static/index.html` ```java <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home page</title> </head> <body> <p> This is home page </p> <script> fetch('http://localhost:8080/cities') .then(res => res.json()) .then(data => console.log('Output: ', data)) .catch(err => console.error(err)); </script> </body> </html> ``` 在主页中，我们使用 Fetch API 创建一个获取所有城市的请求。该请求来自同一来源，因此此处不需要 CORS。 `com/zetcode/Application.java` ```java package com.zetcode; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` `Application`设置 Spring Boot 应用。 ## Angular 前端应用的前端是使用 Angular 创建的。 ```java $ npm i -g @angular/cli $ ng new frontend $ cd frontend ``` 我们创建一个新的 Angular 应用。 `src/app/app.module.ts` ```java import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 在`app.module.ts`中，我们启用了 http 模块，该模块用于发出请求。 `src/app/app.component.ts` ```java import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private http: HttpClient) { } title = 'frontend'; httpdata; ngOnInit() { this.http.get('http://localhost:8080/cities') .subscribe((data) => this.displaydata(data)); } displaydata(data) { this.httpdata = data; } } ``` 在`ngOnInit()`方法中，我们向后端创建一个 GET 请求。数据存储在`httpdata`中。 `src/app/app.component.html` ```java <h2>List of cities</h2> <ul *ngFor = "let data of httpdata"> <li>Name : {{data.name}} Population: {{data.population}}</li> </ul> ``` 我们使用`*ngFor`指令在 HTML 列表中显示数据。 ```java $ ng serve ``` 我们启动 Angular 服务器。 ```java $ mvn spring-boot:run ``` 我们运行后端服务器。现在我们找到`localhost:4200`。加载页面后，会将请求发送到 Spring Boot 应用以获取城市列表。在本教程中，我们为具有 Angular 前端的 Spring Boot 应用启用了 CORS 支持。由于这两个部分在不同的域上运行，因此需要 CORS。列出[所有 Spring Boot 教程](/all/#springboot)。 {% endraw %}