angular - Error: Access blocked by CORS policy: Response to preflight request doesn't pass access control check

Question

While calling Post method from angular i a getting CORS policy issue but for GET request it is working fine.

Access to XMLHttpRequest at 'http://localhost:9090/http://localhost:9090/pme/projectCategory' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my code..

In spring boot a i have added @CrossOrigin(origins = "http://localhost:4200") before @RestController in my controller and in spring boot application main method i have added

@Bean
       public WebMvcConfigurer corsConfigurer() {
          return new WebMvcConfigurerAdapter() {
             @Override
             public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/projectInfo").allowedOrigins("http://localhost:9090");
                registry.addMapping("projectCategory").allowedOrigins("http://localhost:9090");
             }
          };
       }

In angular

I have created proxy.conf.json file:

{
    "/pme": {
      "target": "http://localhost:9090",
      "secure": true,
      "pathRewrite": {
        "^/pme": ""
    },
      "changeOrigin": true
    }
  }

Then I modified the start command in the package.json file:

"start": "ng serve --proxy-config proxy.conf.json"

then finally i created api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ProjectCategoryList } from '../schema/projectcategorylist';
import { ProjectsModule } from '../../modules/general/projects/projects.module';
import{ GlobalConstants } from '../../../../src/app/common/global-constants';
import {DataModule} from '../data.module'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import { catchError, retry } from 'rxjs/operators';


@Injectable()
export class ApiService {


  constructor(private http: HttpClient) {}

  //http://localhost:9090/projectInfo
private url = GlobalConstants.apiURL;
//private apiUrl2 = 'http://localhost:9090/object_varImagelist';

getAll(path): Observable<any> {
  return this.http.get<any>(this.url+path);
}

getById(path): Observable<any> {
  return this.http.get<any>(this.url+path);
}

post(path,object_var): Observable<any> {
  console.log("post request")
  return this.http.get<any>(this.url+path,object_var);
}

put(path,object_var): Observable<any> {
  return this.http.get<any>(this.url+path,object_var);
}

delete(path,object_var): Observable<any> {
  return this.http.get<any>(this.url+path,object_var);
}}

then i am calling this method like this, in projectCategory.service.ts i created method

createProjectsCategory(projectsCategory: Object): Observable<Object> {
  console.log("Submitting data service")
  return this.apiService.post(this.baseUrl, projectsCategory);
}

then in createcategory.component.ts file i called method

newProjectsCategory(): void {
    this.submitted = false;
    this.projectsCategory = new ProjectsCategory();
  }

  save() {
    this.projectsCategoryService
    .createProjectsCategory(this.projectsCategory).subscribe(data => {
      console.log(data)
      this.projectsCategory = new ProjectsCategory();
      this.submitted = true; 
      this.gotoList();
    }, 
    error => console.log(error));
  }

  onSubmit() {
    
    
    console.log("Data Submitted")
    this.save();  
     
  }

  gotoList() {
    this.router.navigate(['/admin/projectCategory/list']);
  }

Answer 1

等待大神答复