极客教程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 中创建。
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
<?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
spring.main.banner-mode=off
application.properties是主要的 Spring Boot 配置文件。 使用spring.main.banner-mode属性，我们可以关闭 Spring 标语。
com/zetcode/model/City.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
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
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中，我们有一个返回所有城市的端点。
Note: In Java enterprise applications it is a good practice to define a service layer that works with repositories. For simplicity reasons, we skip the service layer.
com/zetcode/conf/AppConf.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
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
<!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
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 创建的。
$ npm i -g @angular/cli
$ ng new frontend
$ cd frontend
我们创建一个新的 Angular 应用。
src/app/app.module.ts
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
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
<h2>List of cities</h2>
<ul *ngFor = "let data of httpdata">
<li>Name : {{data.name}} Population: {{data.population}}</li>
</ul>
我们使用*ngFor指令在 HTML 列表中显示数据。
$ ng serve
我们启动 Angular 服务器。
$ mvn spring-boot:run
我们运行后端服务器。 现在我们找到localhost:4200。 加载页面后，会将请求发送到 Spring Boot 应用以获取城市列表。
在本教程中，我们为具有 Angular 前端的 Spring Boot 应用启用了 CORS 支持。 由于这两个部分在不同的域上运行，因此需要 CORS。