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

Posted 2023-03-04

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

【英文标题】：Blocked by CORS : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the resource

【发布时间】：2021-12-10 03:14:48

【问题描述】：

从源“http://localhost:4200”访问“http://localhost:8080/employee/add”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-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服务的代码sn-ps：

点击按钮后调用此函数

add-employee-component.ts

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

employee.service.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 都非常陌生。

【参考方案1】：

像这样更新你的 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;

【讨论】：

您好，感谢您的回复。但是在像上面这样更新时，问题仍然存在。此外，获取以前工作的所有员工也会出现同样的错误。

好的，分享你的完整spring配置。

Spring 版本是 2.5.5 java 版本 1.8。我不明白“全弹簧配置”一词。如果您需要更多信息，请告诉我

你一定是在使用@Configuration的一些类，分享所有内容。 corsConfigurationSource()以外的所有方法