web-dev-qa-db-fra.com

Problème de récupération dans React with CORS

Je suis complètement nouveau sur CORS et j'ai le problème suivant:

-J'utilise create-react-app (port 3000) qui invoque certains REST Services faits au démarrage du printemps (port 8080). J'ai ajouté l'authentification JWT à mon REST API donc maintenant je dois m'authentifier avant d'appeler quoi que ce soit d'autre.

La chose est que je peux m'authentifier dans mon projet SpringBoot index.html (que j'ai utilisé pour tester l'auth jwt), mais maintenant que j'appelle le/auth POST sur React, j'obtiens un 200 OK mais je ne peux pas trouver le Token n'importe où dans la réponse.

SpringBoot index.html

function doLogin(loginData) {
        $.ajax({
            url: "/auth",
            type: "POST",
            data: JSON.stringify(loginData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data, textStatus, jqXHR) {
                setJwtToken(**data.token**); //I can get the token without a problem
                $login.hide();
                $notLoggedIn.hide();
                showTokenInformation();
                showUserInformation();
            },....

React Fetch (port 3000) avec CORS

    fetch(url, {
      crossDomain:true,
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        username: user,
        password: pass,
      })
    }).then((responseJson) => {
      console.log(responseJson);
      const tokenInfo = this.state.token;

      if(tokenInfo !== undefined)
.....

Alors que le fetch de réaction renvoie un 200 OK, j'obtiens une réponse pointilleuse et ne peux pas sembler obtenir le responseJson.token de la même manière que je l'ai fait sans CORS. Qu'est-ce que je rate?

Réponse:

Response {type: "cors", url: "http://localhost:8080/auth", redirected: false, status: 200, ok: true, …}

Toute aide est la bienvenue.

Merci d'avance. Jorge

MODIFIER:

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
            // we don't need CSRF because our token is invulnerable
            .csrf().disable()

            .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()

            // don't create session
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()

            .authorizeRequests()
            //.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

            // allow anonymous resource requests
            .antMatchers(
                    HttpMethod.GET,
                    "/",
                    "/*.html",
                    "/favicon.ico",
                    "/**/*.html",
                    "/**/*.css",
                    "/**/*.js"
                    ,"/rates/**"
            ).permitAll()
            //Allows the user to authenticate
            .antMatchers("/auth/**").permitAll()
            .anyRequest().authenticated();

    // Custom JWT based security filter
    httpSecurity
            .addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);

    // disable page caching
    httpSecurity
            .headers()
            .frameOptions().sameOrigin()
            .cacheControl();
}
javascriptreactjsspring-bootcorsfetch
7
J_Ocampo

Vous devez d'abord convertir la réponse d'extraction avec .json(). Il renvoie une promesse, vous pouvez donc l'utiliser de cette façon:

fetch(url, {
  crossDomain:true,
  method: 'POST',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify({
    username: user,
    password: pass,
  })
})
  .then(response => response.json())
  .then(responseJson => {
    console.log(responseJson);
    const tokenInfo = this.state.token;
    if (tokenInfo !== undefined) {
...

Voir https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch .

11
Miguel Calderón