Souhaitant intégrer mon formulaire d’inscription à ma newsletter à mon site avec mon propre HTML/CSS/JS, je suis parti de la version « HTML simple » que j’ai adaptée. Je tente de gérer la soumission avec mon propre JS. Elle fonctionne et l’adresse e-mail soumise reçoit bien l’e-mail de confirmation (double opt-in), mais le navigateur reçoit une erreur de requête cross-origin non autorisée.
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur [URL de mon point d’accès chez Brevo]. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. Code d’état : 200.
Voici ce que je fais, dans le principe :
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('form');
const dialog = document.getElementById('dialog');
form.addEventListener('submit', function (event) {
// Prevent default form submission
event.preventDefault();
// Collect form data
const formData = new FormData(form);
// Send form data to endpoint
fetch(form.action, {
method: 'POST',
body: formData,
})
.then(response => {
if (response.ok) {
dialog.textContent = 'Success';
dialog.showModal();
}
else {
dialog.textContent = 'Bad response';
dialog.showModal();
}
})
.catch(error => {
console.error(error);
dialog.textContent = error;
dialog.showModal();
});
});
});
Du coup je passe dans le catch error, donc je ne peux pas afficher de message de succès à l’utilisateur·ice bien que la soumission ait fonctionné — à moins de gérer ce message de succès dans le catch error, ce qui ne serait pas franchement clean — et plus généralement ça ne me paraît pas correct ni pérenne de mettre ça en prod…
Y a-t-il un moyen d’autoriser les requêtes CORS émises depuis mon domaine ? Je n’ai pas trouvé cette option dans mes paramètres. Y a-t-il sinon une autre solution ?
Bonjour @Frann , merci pour votre post.
Est-ce que vous pourriez nous dire sur quel site web ou sur quelle page vous avez essayé d’installer le formulaire ?
Bonjour @ahudavert
Voici une URL de preprod : https://newsletter3431786.frann-bd.pages.dev/
Vous pouvez tester le formulaire et constater le comportement que j’ai décrit dans mon 1er post. Vous verrez un message d’erreur CORS dans la console du navigateur, ainsi qu’un message d’erreur dans l’UI du site (un peu plus verbeux que dans l’exemple de code que j’ai donné mais peu importe), mais vous recevrez pourtant l’e-mail de double opt-in.
Bon vu qu’il n’y a pas de solution directe à ce que je décris apparemment, j’ai laissé tomber cette méthode et je me suis documenté sur l’API. Du coup j’envoie le formulaire à une fonction serverless qui ajoute le contact en double opt-in via l’API de Brevo.
Ça m’a fait potasser parce que c’était pas dans mes cordes à la base, mais je suis arrivé à mes fins et c’est propre.
Je constate que comme pour beaucoup de services, soit on a des solutions clés en mains WYSIWYG un peu personnalisables mais difficiles à ajuster finement (avec typiquement beaucoup de code en trop), soit il faut être dev avec des compétences backend. Si on a un profil webdesigner/frontend et qu’on veut avoir totalement la main sur la partie front uniquement, on est dans un entre-deux qui n’est pas forcément traité. Je jette pas la pierre, c’est pas spécifique à Brevo et c’est peut-être un problème de niche.
Pour le coup, le double opt-in fonctionne normalement pour moi (= la doc de ton dernier lien). Si tu ne recevais pas les e-mails de confirmation avec cette méthode, c’est peut-être l’url d’API à laquelle tu fetchais les données qui n’était pas bonne ? (j’avais fait cette boulette à un moment donné, j’avais laissé celle de la création de contact simple, ayant initialement testé cette méthode).
C’est https://api.brevo.com/v3/contacts/doubleOptinConfirmation
Et pas https://api.brevo.com/v3/contacts
Sinon. vérifie que ton templateId correspond bien à un template d’e-mail existant dans ta plateforme d’admin.
Je n’ai pas gardé l’historique du fichier et je ne vais pas pouvoir retrouver mon erreur…
En résumé, deux façons différentes pour un même résultat. Je t’invite à voir la doc / automatisation (deuxième lien) qui est bien faite et peut te donner des idées d’application
