本地主机上的 CORS 起源错误 spring boot + angular答案

【问题标题】：CORS origin error spring boot + angular on localhost本地主机上的 CORS 起源错误 spring boot + angular
【发布时间】：2022-01-11 01:11:10
【问题描述】：

我正在尝试通过一个 Angular 应用程序使用在 Spring Boot 上开发的 Restful api，我在实现下面遇到了这个问题：

弹簧启动控制器：

@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();
    }
}

角度服务

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");
  }
}

角度组件

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 应用程序时，我遇到了这个错误：

CORS 策略已阻止从源“http://localhost:4200”访问“localhost:4200/api/list”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、 chrome 扩展，chrome 不受信任，https。

enter image description here

【问题讨论】：

this.http.get("localhost:4200/api/list")?这不应该使用您尝试调用的服务的完整 URL 吗？
正如之前的评论者所说，您需要在 URL 的前面添加 http://：正如错误告诉您的那样，它不知道您尝试使用哪种协议。跨度>
除了上面的cmets：http://localhost:4200/不是origin。删除 @CrossOrigin(origins = "http://localhost:4200/") 中的尾部斜杠。

标签： angular spring spring-boot spring-mvc cors

【解决方案1】：

另一种答案。您可以添加到配置类：

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

【讨论】：