Spring Boot CORS 教程

{% raw %}

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

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中，我们有一个返回所有城市的端点。

注意：在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("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。

列出所有 Spring Boot 教程。

{% endraw %}

ZetCode 中文系列教程

7.md

Spring Boot CORS 教程

CORS

Spring Boot CORS 示例

Spring Boot 后端

Angular 前端