要求されたリソースに「アクセス制御許可元」ヘッダーが存在しません。したがって、http：// localhost：4200にはアクセスが許可されていません。

Question

angular.js 4からjava rest APIにリクエストを送信しようとしています。私は、次のエラーを取得しています：NO「アクセス制御 - 許可 - 起源」ヘッダーは、要求されたresource.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"); 
} 

Answer 1

クロムブラウザにAllow-Control-Allow-Origin：* 1.0.3という拡張子を追加するだけです。 アドレスバーのほかにCORSボタンが表示され、それを有効にしてクロームでプロジェクトを実行すると正常に動作します。 Link for Allow-Control-Allow-Origin extension

Answer 2

またはSpringアプリケーションは、ローカルホストを許可するグローバル設定を追加します：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; 
    } 
}