web-dev-qa-db-fra.com

Angular 5: le code de statut HTTP 403 de la réponse au contrôle en amont est incorrect

Lorsque j'envoie une demande POST au serveur, une erreur se produit:

Failed to load http://localhost:8181/test: 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.

Le backend est écrit en Java Spring . Ma méthode pour créer un test:

createTest() {
    const body = JSON.stringify({
      'description': 'grtogjoritjhio',
      'passingTime': 30,
      'title': 'hoijyhoit'
    });

    const httpOptions = {
      headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      )
    };

    return this._http.post(`${this._config.API_URLS.test}`, body, httpOptions)
      .subscribe(res => {
        console.log(res );
      }, error => {
        console.log(error);
    });
  }

Get Method fonctionne, mais Post ne fonctionne pas. Ils travaillent tous les deux chez Swagger et Postman. J'ai changé de méthode POST plusieurs fois. Les en-têtes de mon code ne fonctionnent pas, mais j'ai résolu le problème en développant leur extension à Google Chrome. Il y avait seulement une erreur:

Response for preflight has invalid HTTP status code 403.

Il me semble que ce n'est pas un problème angulaire. S'il vous plaît dites-moi comment moi ou mon ami (qui a écrit le backend) pouvons résoudre ce problème.

javaspringcorsangular5http-status-code-403
3
Vitaliy Pogoretsky

Vous devez vous assurer que Spring accepte les demandes CORS

De même, si vous avez appliqué la sécurité Spring et avez besoin d'en-têtes d'autorisation, par exemple pour votre API, alors (uniquement si vous souhaitez que votre application prenne en charge CORS) vous devez exclure les appels OPTIONS de l'autorisation dans votre fichier de configuration de sécurité Spring.

Ce sera quelque chose comme ça:

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity http) throws Exception {

  @Override
  public void configure(WebSecurity web) throws Exception {
    // Allow OPTIONS calls to be accessed without authentication
    web.ignoring()
        .antMatchers(HttpMethod.OPTIONS,"/**")

Remarque:

En production, il est probablement préférable d'utiliser le proxy inverse (comme nginx) et de ne pas autoriser les navigateurs à appeler directement votre API. Dans ce cas, vous n'avez pas besoin d'autoriser les appels OPTIONS comme indiqué ci-dessus.

2
Ahmed Elkoussy

J'ai eu exactement le même problème avec Angular ces derniers temps. Cela se produit parce que certaines demandes déclenchent des demandes de contrôle en amont, par exemple. PATCH, DELETE, OPTIONS etc. Ceci est une fonctionnalité de sécurité des navigateurs Web. Cela fonctionne chez Swagger et Postman simplement parce qu'ils n'implémentent pas une telle fonctionnalité. Pour activer les demandes CORS au printemps, vous devez créer un bean qui renvoie l'objet WebMvcConfigurer. N'oubliez pas de @Configuration au cas où vous auriez créé une classe supplémentaire pour cela.

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
                        .allowedHeaders("*");
            }
        };
    }

Bien sûr, vous pouvez adapter cela à vos besoins.

1
Klimiuk S