请求的资源上不存在“Access-control-allow-origin”标头。因此不允许访问来源 http://localhost:4200答案

【问题标题】：NO 'Access-control-allow-origin' header is present on the requested resource.Origin http://localhost:4200 is therefore not allowed access请求的资源上不存在“Access-control-allow-origin”标头。因此不允许访问来源 http://localhost:4200
【发布时间】：2017-12-08 11:37:23
【问题描述】：

我正在尝试通过 angular.js 4 向 java rest api 发送请求。我收到以下错误：请求的资源上不存在“Access-control-allow-origin”标头。因此，Origin http://localhost:4200 是不允许访问我的代码看起来像：

    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") 在java代码中添加这一行必须解决这个问题，但我仍然遇到同样的错误，谁能告诉我如何解决这个问题？我的控制器看起来像：

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

【问题讨论】：

标签： java angularjs spring-mvc

【解决方案1】：

只需将扩展 Allow-Control-Allow-Origin: * 1.0.3 添加到您的 chrome 浏览器即可。然后地址栏旁边会出现一个 CORS 按钮，只需启用它并在 chrome 上运行您的项目就可以正常工作。 Link for Allow-Control-Allow-Origin extension

【讨论】：

【解决方案2】：

或向您的 Spring 应用程序添加一个全局配置，允许 localhost:4200

例如

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;
    }
}

【讨论】：