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 %}