CORS 原点错误 spring 启动 + angular 在 localhost

Question

我正在尝试通过 Angular 应用程序使用在 spring 引导上开发的 Restful api 应用程序，我在下面遇到了这个问题：

1. Spring 启动 controller：

 @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:4200/") public class ProductController { @Autowired private ProductService productService; @PostMapping("/add") public void addProduct(@RequestBody Product p){ productService.addProduct(p); } @GetMapping("/list") public List<Product> getListOfProducts(){ return productService.getAllProducts(); } }

2. Angular 服务

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class ProductsService { constructor(private http: HttpClient) { } getProducts(){ return this.http.get("localhost:4200/api/list"); } }

3. Angular 组件

 import { Component, OnInit } from '@angular/core'; import { ProductsService } from '../products.service'; @Component({ selector: 'app-products', templateUrl: './products.component.html', styleUrls: ['./products.component.css'] }) export class ProductsComponent implements OnInit { constructor(private products:ProductsService) { } ngOnInit() { this.products.getProducts().subscribe((res)=>{ console.warn(res); }) } }

尝试运行 angular 应用程序时，我遇到此错误：

Access to XMLHttpRequest at 'localhost:4200/api/list' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension ，铬不受信任，https。

在此处输入图像描述

Answer 1

@CrossOrigin(origins = "*")

看一下这个。

Answer 2

替代答案。 您可以添加到配置 class：

public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("HEAD", "OPTIONS", "GET", "POST", "PUT", "PATCH", "DELETE")
                .allowedOrigins("*")
                .maxAge(3600);
    }
}