角度4のHTTPポスト経由でサーバーサイドで許可されていないJavaの残りのAPIに接続

Question

私は、ポストマッピングアノテーションを持つJavaサーバー上で宣言された残りのメソッドを呼び出す4角クライアントサービスを持っています。

私は角度から呼び出すとき、それはサーバーによって受け入れられません。しかし、Postmanで試してみると、ヘッダContent-Type application/jsonだけを追加すると動作します。

同じヘッダーが追加されている場合や、いくつかのヘッダーが追加されていても、角度からは機能しません。ここで

角度サービス上のコード：

const headers = new Headers({ 
'Access-Control-Allow-Origin' : '*', 
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, 
DELETE, OPTIONS', 
'Access-Control-Allow-Headers': 'Origin, Content-Type, X- 
Auth-Token', 
'Content-Type': 'application/json' 
}); 

そして、ブラウザ上で指定されたエラー：

2zone.js:2744 OPTIONS 
http://localhost:8080/api/auth/login net::ERR_ABORTED 
invokeTask @ zone.js:1427 globalZoneAwareCallback @ 
zone.js:1445 login?returnUrl=%2F:1 Failed to load 
http://localhost:8080/api/auth/login: Response to 
preflight request doesn't pass access control check: No 
'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://localhost:4200' is 
therefore not allowed access. The response had HTTP 
status code 403. auth.service.ts:205 Server error 

サーバー私が現時点で持っている

public login(username: string, password: string): Observable<{}> { 

const requestParam = { 
    username: username, 
    password: password, 
    email: 'email@at.pt' 
}; 

const options = this.generateOptions(); 

const body = JSON.stringify(requestParam); 
return this.http 
    .post(AuthService.SIGNIN_URL, body, options) 
    .map(this.extractData) 
    .catch(this.handleError); 
} 

ヘッダサイドはスプリングブーツを使用しています：

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RestController;

/** 
* Returns authentication token for given user 
* 
* @param authenticationRequest 
*   with username and password 
* @return generated JWT 
* @throws AuthenticationException 
*/ 
@PostMapping(LOGIN_URL) 
public ResponseEntity getAuthenticationToken(@RequestBody JwtAuthenticationRequest authenticationRequest) 
     throws AuthenticationException { 
    System.out.println("on login server side"); 
    ... 
} 

public class JwtAuthenticationRequest implements Serializable { 

private String username; 
private String email; 
private String password; 
... 
} 

ありがとう！

Answer 1

あなたは、サーバー側でこれを作成する必要があります。

@Configuration 
@EnableWebMvc 
public class WebConfig extends WebMvcConfigurerAdapter { 

    @Override 
    public void addCorsMappings(CorsRegistry registry) { 
     registry.addMapping("/**"); 
    } 
} 

そして、あなたの方法上のあなたも、このよう@CrossOriginを追加する必要があります

@CrossOrigin 
@PostMapping(LOGIN_URL) 
public ResponseEntity getAuthenticationToken(@RequestBody JwtAuthenticationRequest authenticationRequest) 
     throws AuthenticationException { 
    System.out.println("on login server side"); 
    ... 
} 

Answer 2

@Configuration 
public class WebMvcConfig implements WebMvcConfigurer { 
@Override 
public void addCorsMappings(CorsRegistry registry) { 
    registry.addMapping("/**"); 
} 
} 

代わりのWebMvcConfigurerAdapterを使用して、それが動作するはずですがローマダニロフのポストとしても