NO 'Access-control-allow-origin' header is present on the requested resource.Origin http://localhost:4200 is therefore not allowed access

Question

I am trying to send request through angular.js 4 to java rest api.I am getting the following error : NO 'Access-control-allow-origin' header is present on the requested resource.Origin http://localhost:4200 is therefore not allowed access My code looks like :

    signupUser() {
    // if (this.signupForm.dirty && this.signupForm.valid) {
    // let headers = new Headers({ 'Content-Type': 'application/json' });
    let data = {
      "email": this.signupForm.value.email,
      "password": this.signupForm.value.password,
      'phone': this.signupForm.value.mobile,

      // 'first_name': 'dd1',
      // 'email': 'xyz@gmail.com',
      // 'password': 'manju',
      // 'phone': '123456',
      'signup_type': 'Custom',
      // social_media: 
      // "email": this.loginForm.value.name,
      // "password": this.loginForm.value.password
    };
    console.log(data)

    let options = {
      type: "GET",
      url: "http://localhost:8085/dashboard/signUp",
      body: JSON.stringify(data)
    };

    this.http.post(options.url, options.body, {
      headers: this.headers
    }).subscribe((data) => {
      console.log(data);
      this.otpScreen = true;
    }, (err) => {
      console.log(err);
    });
    // alert(`Name: ${this.userForm.value.name} Email:         ${this.userForm.value.password}`);
    // }
}

@CrossOrigin(origins="http://localhost:4200") Adding this line in java code has to resolve this issue but still same error I'm getting can anyone let me know how to solve this issue? My Controller looks like:

@CrossOrigin
@RequestMapping("/signUp")
public void getOTP(HttpServletRequest request, HttpServletResponse response){
    System.out.println("In Signup");
}

Answer 1

Just add an extension Allow-Control-Allow-Origin: * 1.0.3 to your chrome browser. Then a CORS button will appear besides address bar, just enable it and run your project on chrome it will work fine. Link for Allow-Control-Allow-Origin extension

Answer 2

or add a global config to your spring application allowing the localhost:4200

eg

package nl.ivonet.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * Adds a CORS filter on http://localhost:4200 allowing it cross origin access.
 * It is the url where ng serve works when developing.
 * <p>
 * you could also add @CrossOrigin(origins = "*") to the rest method but this is global.
 *
 * @author Ivo Woltring
 */
@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:4200");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        final FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}