ZetCode

Spring Boot CORS

最后修改于 2023 年 8 月 2 日

在本文中，我们将展示如何在 Spring Boot 应用程序中设置跨域资源共享。

CORS

跨域资源共享 (CORS) 是一种安全策略，它使用 HTTP 标头来告诉浏览器允许在一个来源（域）运行的 Web 应用程序有权访问来自不同来源的服务器上的选定资源。

网页可以嵌入跨域图像、样式表、脚本、iframe 和视频。 某些跨域请求，特别是 Ajax 请求，默认情况下会被同源安全策略禁止。

XMLHttpRequest 和 Fetch API 遵循同源策略。 因此；除非来自其他来源的响应包含正确的 CORS 标头，否则使用这些 API 的 Web 应用程序只能从加载该应用程序的相同来源请求 HTTP 资源。

Spring Boot CORS 示例

以下 Spring Boot 应用程序使用 Angular 作为前端。 Angular SPA 在 localhost:4200 上运行，并向在 localhost:8080 上运行的 Spring Boot 后端发出请求。 为了使其工作，我们需要在 Spring Boot 应用程序中启用 CORS。

Spring Boot 后端

后端将在 Spring Boot 中创建。

build.gradle
...
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

这是项目结构。

build.gradle 
plugins {
    id 'org.springframework.boot' version '3.1.1'
    id 'io.spring.dependency-management' version '1.1.0'
    id 'java'
}

group = 'com.zetcode'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    runtimeOnly 'com.h2database:h2'
}

test {
    useJUnitPlatform()
}

这是 Gradle 构建文件。

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 jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.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 {

    private final CityRepository cityRepository;

    @Autowired
    public MyController(CityRepository cityRepository) {
        this.cityRepository = cityRepository;
    }

    @GetMapping(value = "/cities")
    public List<City> cities() {

        return cityRepository.findAll();
    }
}

在 MyController 中，我们有一个返回所有城市的端点。

注意： 在 Java 企业应用程序中，定义一个与存储库一起工作的服务层是一个好习惯。 为了简单起见，我们跳过服务层。

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("https://: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);

    private final CityRepository cityRepository;

    @Autowired
    public MyRunner(CityRepository cityRepository) {
        this.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('https://: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: any;

    ngOnInit() {
        this.http.get('https://:8080/cities')
        .subscribe((data) => this.displaydata(data));
    }

    displaydata(data: Object) { 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 服务器。

$ ./gradlew bootRun

我们运行后端服务器。

在本文中，我们为带有 Angular 前端的 Spring Boot 应用程序启用了 CORS 支持。 由于这两部分在不同的域上运行，因此需要 CORS。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。 自 2007 年以来，我一直在撰写编程文章。 迄今为止，我已撰写了 1,400 多篇文章和 8 本电子书。 我拥有超过十年的编程教学经验。

列出 所有 Spring Boot 教程。