CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Question

I am using Angular6 as FrontEnd running on http:// localhost:4200 and Spring Boot (which has in built Tomcat server) as backend (exposing a GET Rest API) running on https:// localhost:8083/ldap . When I run this, I am getting CORS policy error on the browser. So I searched on internet and tried multiple fixes which were suggested on internet. I am not sure what I am missing on each of the solution below.

Unsuccessful Fix 1: I tried to run it via proxy.
-> Created a proxy.config.json in parallel to package.json with below content.
{
   "/ldap/": {
   "target": "https://localhost:8083",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
 }
}
-> Added below entry in package.json inside script block there.
"start":"ng serve --proxy-config proxy.config.json",

-> In the service class, tried calling my spring boot backend rest API like below.
return this.http.get('/ldap');
Now when I run my app, I got below error:

GET http:// localhost:4200/ldap 404 (Not Found) : zone.js:3243


Unsuccessful Fix 2: I added below headers before calling the Rest API in my frontend.
getUserAuthenticatedFromLDAP() {
  const httpOptions = {
    headers: new HttpHeaders({
    'crossDomain': 'true',
    'mode' : 'cors',
    'allowCredentials': 'true',
    'origins': '',
    'allowedHeaders': '',
    'Access-Control-Allow-Origin': '',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Max-Age': '86400'
 
    })
    };
 
    return this.http.get('https://localhost:8083' , httpOptions);
}
 

Access to XMLHttpRequest at 'https://localhost:8083/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Unsuccessful Fix 3: Rather than making changes at front end, I tried to make changes at API level by adding below code at controller level.

@Controller
@CrossOrigin(origins = "http://localhost:4200")
public class WelcomeController {

// This is for LDAP Authentication
@GetMapping("/ldap")
@ResponseBody
public Authentication hello() {
    return LdapSecurity.getAuthentication();
}

}

Here I am getting below error again:

Access to XMLHttpRequest at 'https://localhost:8083/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

More unsuccessful fixes:

I even tried to change headers of Tomcat using application.properties file but could not find sufficient example or piece of code to make any change.
On internet, some people suggested to implement filter on API level but I am not sure that in whcih class I need to add those overriden filter method.
I am stuck in this issue for last 2 days.

PS: I see some people have implemented CORS filter at API layer or implemented class like below. Now my question is if I implement below class then where do I need to refer this class ? Is it web.xml or any other place.

@Configuration   @EnableWebSecurity  
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {  

Answer 1

I was using Spring security feature for LDAP authentication. But now I removed Spring security feature for LDAP and used a basic program in java to make a connection with LDAP. After that I used CrossOrigin tag in controller layer and now I am not getting CORS issue. Thanks you all for your help.

Answer 2

please have a look here, you need to enable cors in your method/controller

@CrossOrigin(origins = "http://localhost:9000")
@GetMapping("/greeting")
public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {
    System.out.println("==== in greeting ====");
    return new Greeting(counter.incrementAndGet(), String.format(template, name));
}