Problème de communication entre back et front

[Blazourax361]

Bonjour à tous,
Je suis débutante en développement Web et je me retrouve coincée depuis quelques jours sur un problème.
Voici la situation :

Je développe actuellement une application web en utilisant Java pour le backend et TypeScript/HTML/CSS pour le frontend.
J'aimerais afficher sur ma page une adresse mail pour contacter le support technique, mais on m'a demandé d'envoyer cette adresse mail depuis le back.

J'ai beau m'inspirer d'autres parties du code qui sont un peu similaires je ne comprend pas pourquoi ça ne fonctionne pas.

Dans le back, j'ai créé 2 documents : SupportConfiguration et SupportController, et j'ai ajouté l'adresse mail dans le fichier de conf du projet (support.contact.mail).

Voici SupportConfiguration :

@Configuration
public class SupportConfiguration {

    @Value("${support.contact.mail}")
    private String supportEmail;

    public String getSupportEmail() {
        return this.supportEmail;
    }

}

Voici SupportController qui va envoyer l'email à l'url /support/mail :

@RestController
@RequestMapping("/support")
public class SupportController {

    private SupportConfiguration supportConfiguration;

    @Autowired
    public SupportController(SupportConfiguration supportConfiguration) {this.supportConfiguration = supportConfiguration;
    }

    @GetMapping("/mail")
    public String getSupportEmail() {
        return supportConfiguration.getSupportEmail();
    }
}

Et voici comment j'essaye de récupérer la valeur de l'email dans le front (support.mail = "/support/mail") :

@Injectable({
  providedIn: 'root'
})
export class SupportService {

  constructor(private http: HttpClient) { }

  supportLink() {
    const endpoint = environment.apiUrl + environment.endpoints.support.mail;
    return this.http.get<any>(endpoint);
  }
}

Et l'appel à cette fonction :

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  support_email:any;

  constructor(private supportService:SupportService){ }

  ngOnInit(): void {
    this.supportService.supportLink().subscribe(response => {
       this.support_email = response;
    });

  }
}

Mais quand j'utilise ce code j'ai une erreur car le front ne reçoit pas bien l'adresse mail.

Pouvez vous m'aider svp ? Cela commence à faire un moment que je bloque dessus et je n'arrive même pas à savoir si mon problème vient du back ou du front.

Merci d'avance !
-----

[vgondr98]

Quelle est l'erreur ?

Dans ton code, je ne vois pas de gestion du CrossOrigin (https://developer.mozilla.org/fr/docs/Web/HTTP/CORS). Ce problème intervient quand le client et le serveur ne sont pas localisé (le webservoce ne fonctionne pas).
J'ai eu ce problème car mon code angular était sur le port 4200 et mon code java sur le port 8080.

Avec Spring Boot, il suffit d'annoter avec @CrossOrigin.

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController

[Blazourax361]

Voici l'erreur que j'obtiens :


Il me semble que les autres développeurs du projet ont fait en sorte que le back et le front soient sur le même port 8080 donc je ne sais pas si il y a besoin de @CrossOrigin.

[vgondr98]

Il faudrait que tu rentres directement l'url du back dans ton navigateur pour voir sous quel format est envoyé le mail.
De mon côté le http failure during parsing, cela m'arrive quand j'attend un json et que je reçois pas un json mais un string par exemple.

[A voir en vidéo sur Futura]

[Blazourax361]

Je reçois juste un string quand j'écris l'URL dans le navigateur.
Du coup il faudrait que j'envoie ça sous forme d'un JSON c'est ça ?

[vgondr98]

https://stackoverflow.com/questions/...during-parsing

[vgondr98]

Soit envoyé un json par le webservice soit spécifié {responseType: 'text'} dans le javascript.

[polo974]

tout se négocie...

https://restfulapi.net/content-negotiation/

[Blazourax361]

A quel endroit doit écrire {responseType: 'text} ?

Mon code actuel fais que support_email = [object Object] et pas le mail ... :/ Alors que le back envoie bien un String de l'adresse mail.

  ngOnInit(): void {
    this.supportService.supportLink().subscribe(response => {
      this.support_email = response;
      console.log("Support email received :", this.support_email);
    });
  }

[Blazourax361]

J'ai finalement trouver une solution :

  ngOnInit(): void {
    this.supportService.supportLink().subscribe(response => {
      this.support_email =<String>response.message;
      console.log("Support email received :", this.support_email);
    });
  }

Merci pour votre aide !