时间戳

首页 > 解决方案 > 被 CORS 阻止：对预检请求的响应未通过访问控制检查：资源上不存在“Access-Control-Allow-Origin”标头

angular - 被 CORS 阻止：对预检请求的响应未通过访问控制检查：资源上不存在“Access-Control-Allow-Origin”标头

问题描述

从源“http://localhost:4200”访问“http://localhost:8080/employee/add”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问” -Control-Allow-Origin' 标头存在于请求的资源上。

我正在关注 youtube 教程并尝试创建一个员工经理应用程序。我正在使用带有 Angular 的 Spring。我在获取所有员工时遇到了 CORS 问题，我在 Main 类中编写了以下代码来克服这个问题。我从我关注的同一个 Youtube 频道获得了此代码。

@Bean
public CorsFilter corsFilter(){
    
    
    CorsConfiguration corsConfiguration= new CorsConfiguration();
    corsConfiguration.setAllowCredentials(true);
    corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200" ));
    corsConfiguration.setAllowedHeaders(Arrays.asList("Origin","Access-Control-Allow-Origin","Content-type","Accept","Authorization",
            "Access-Control-Allow-Origin: *","Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS","Origin", "Accept","X-Reuested-With","Access-Control-Request-Method", "Access-Control-Request-Headers"));
    corsConfiguration.setExposedHeaders(Arrays.asList("Origin","Content-type","Accept","Authorization",
            "Access-Control-Allow-Origin","Access-Control-Allow-Credentials"));
    UrlBasedCorsConfigurationSource urlBasedCosConfigurationSource = new UrlBasedCorsConfigurationSource();
    urlBasedCosConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
    return new CorsFilter((CorsConfigurationSource) urlBasedCosConfigurationSource);
}

使用上面的代码，所有员工的获取都是正确的。但是当我试图添加一个新员工时，它给出了上述错误。

addEmployee 服务的代码片段：

单击按钮后，它会调用此函数

添加员工组件.ts

onAddEmployee(addForm : NgForm) : void{
    this.employeeService.addEmployee(addForm.value).subscribe(
      (response: Employee) => {
        console.log(response);
      },
      (error:HttpErrorResponse) => {
        alert(error.message);
      }
    )
  }

员工服务.ts

public addEmployee(employee : Employee) : Observable<Employee>{
        console.log(`${this.apiServerUrl}/employee/add`);
        return this.http.post<Employee>(`${this.apiServerUrl}/employee/add`,employee);
    }

增加新员工的春季服务

@PostMapping("/add")
    
    public ResponseEntity<Employee> addNewEmployee(@RequestBody Employee employee){
        Employee newEmployee = empService.addEmployee(employee);
        return new ResponseEntity<>(newEmployee,HttpStatus.OK);
    }

是否需要向 CORS 配置添加更多内容？我在其他地方犯错了吗？

我对 Spring 和 Angular 都非常陌生。

标签： angularspringcorsrest

解决方案

像这样更新您的 CORS 配置：

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.addAllowedOrigin("*");
    configuration.setAllowCredentials(true);
    configuration.setAllowedMethods(Arrays.asList("POST", "GET", "PUT", "OPTIONS", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With", "Content-Type", "Authorization", "Origin",
            "Accept", "Access-Control-Request-Method", "Access-Control-Request-Headers"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

推荐阅读