Spring Boot 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 中创建。

pom.xmlsrc├───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;@Repositorypublic 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;@RestControllerpublic 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;@Configurationpublic 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;@Componentpublic 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;@SpringBootApplicationpublic 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。