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.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。

Spring Boot CORS 教程

CORS

Spring Boot CORS 示例

Spring Boot 后端

Angular 前端

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Spring Boot 教程

回顶部

CORS

Spring Boot CORS 示例

Spring Boot 后端

Angular 前端

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Spring Boot 教程

回顶部

切换注册登录

用户名或邮箱

密码

切换登录注册

昵称

邮箱