web-dev-qa-db-ja.com

CORSポリシーによってアクセスがブロックされています：プリフライトリクエストへの応答がアクセス制御チェックに合格しません

Webアプリ用のユーザー管理APIを作成しようとしています。フロントエンドからバックエンドにAPI呼び出しを送信すると、corsエラーが発生します。 corsの問題はどのように解決できますか？私はたくさんのスレッドを読みましたが、まだ進歩していません。

createUser（）API呼び出し後のエラー

Access to XMLHttpRequest at 'http://localhost:8080/user/create' 
from Origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
Redirect is not allowed for a preflight request.

Angular header.config.ts

export const HTTP_OPTIONS = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Credentials' : 'true',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
  })
};

Angular rest-user.service.ts

  public createUser() {
    return this.httpClient.post(this.USER_ENDPOINT + 'create', HTTP_OPTIONS);
  }

SpringConfig.class

@Configuration
@EnableWebMvc
public class SpringConfig implements WebMvcConfigurer {

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

SpringSecurityConfig.class

@Configuration
public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {  
    @Override  
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().anyRequest().authenticated()
        .and().oauth2Client()
        .and().oauth2Login();
    }

}

UserRestController.class

@PostMapping("/user/create")
@ResponseBody
@ResponseStatus(HttpStatus.CREATED)
public void createUser(Principal principal) throws UserAlreadyExistsException {
    userServiceFacadeImpl.createUser(principal.getName());
}

ネットワークメッセージ

enter image description here

更新20.06.19

  private createUser() {

    const headersObject = new HttpHeaders();

    this.oktaAuth.getAccessToken().then( (value) => {

      headersObject.append('Authorization', 'Bearer ' + value);
      headersObject.append('Content-Type', 'application/json');

      const httpOptions = {
        headers: headersObject
      };

      this.httpClient.post('http://localhost:8080/user/' + 'create', null, httpOptions);
    });

  }

enter image description here

angularspringrestspring-boothttp
5
laprof

リソースのhttp応答でhttpヘッダーを設定する必要があります。したがって、サーバー側で設定する必要があります。angular HTTP-Postリクエストから "HTTP_OPTIONS"ヘッダーを削除できます。

0
WorksLikeACharm