Cross Origin Issue in Spring Boot and Angular Application

Question

Well i have to integrate Spring with Angular , wrt to implement this im getting Cros Policy issue and for this regard i have already added @CrossOrigin annotation in the Rest controller. Below is my code

my Rest Controller

@RestController
@CrossOrigin(origins = {"http://localhost:9001", "http://localhost:4200"},allowedHeaders = "*")
public class PatientVisitRestController {
    
    @Autowired
    PatientVisitService patientVisitService;
    
    
    @PostMapping("/patient/add")
    public String savePatientVisit(@RequestBody PatientVisit patientVisit)
    {
        
        patientVisitService.addPatientVisit(patientVisit);
        
        return "Saved := "+patientVisit.getPatientName()+" - "+patientVisit.getSlipNumber();
        
    }

    @GetMapping("/patient/phone/{ph}")
    public List<PatientVisit> getPatientbyPhone(@PathVariable long ph)
    {
        List<PatientVisit> list =  patientVisitService.getPatientVisitByPhoneNumber(ph);
        return list;
    }
    
    
    
}  //end controller


@SpringBootApplication
public class OpdPatientConsoleApplication {

    public static void main(String[] args) {
        SpringApplication.run(OpdPatientConsoleApplication.class, args);
    }

}

and Below is my Angular Service

import { PatientDetails } from './patient-details';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PatientService {

  contextPath:string= 'http://localhost:9001';
  // tomcatServerContentRoot = 'http://localhost:8081';
  endPoint_getPatientsByPhone:string =  this.contextPath+'/patient/phone/';
  
 
  http:HttpClient;
     
  constructor(http:HttpClient) {
    this.http = http;
  }

  getPatientsByPhone(phone:number):Observable<PatientDetails[]>
  {
    let endPoint_getPatientsByPhone = this.contextPath+'/patient/phone/'+phone;
    console.log("--->> Patient Service : searchPatientsByPhone endpoint :- "+endPoint_getPatientsByPhone);
    return this.http.get<PatientDetails[]>(`${this.endPoint_getPatientsByPhone}`);
  }


}

And below is the error screen pic

Thanks in advance

Does this answer your question? [How to configure CORS in a Spring Boot + Spring Security application?](https://stackoverflow.com/questions/36968963/how-to-configure-cors-in-a-spring-boot-spring-security-application) — Toerktumlare, Aug 09 '21 at 14:27

score -2 · Answer 1 · answered Aug 09 '21 at 12:56

One way to solve this problem is to set up a proxy for your local development. To do this, create a "proxy.conf.json" in your root directory.

{
  "/patient": {
    "target": "http://localhost:9001",
    "secure": false
  }
}

Start your application with: "ng serve --proxy-config proxy.conf.json".

For a full example take a look here.

Cross Origin Issue in Spring Boot and Angular Application

1 Answers1