Soumission d’un formulaire en JS - erreur CORS (requête multiorigines)

Bonjour,

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 ?

Je me permets un petit up car je suis étonné de n’avoir aucune réponse et si peu de vues, poster un 23 décembre n’était peut-être pas très propice :slight_smile:

N’y a-t-il donc pas moyen de personnaliser entièrement le formulaire, javascript compris, en évitant cette erreur d’en-tète CORS ?

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.

Au moins, j’ai appris des trucs :slight_smile:

1 Like

Bonjour Frann,

Pour information, si cela peut t-être utile …

J’ai été également amené à abondonner le formulaire fournie par brevo pour préférer l’API.

Dans l’api J’ai préférer la création simple du contact (avec option updateEnabled = true))avec la mise en place de l’automatisation :

https://developers.brevo.com/reference/createcontact

+

https://help.brevo.com/hc/fr/articles/211244629-%C3%89diteur-classique-cr%C3%A9er-une-inscription-double-opt-in-%C3%A0-l-aide-d-une-automatisation

plutôt que la création avec double op-tin qui ne m’a jamais renvoyé de courriel de double opt-in (???)

https://developers.brevo.com/reference/createdoicontact

Bonne journée ! :grinning:

1 Like

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.

Bonne jourmée aussi :slight_smile:

1 Like

Merci de retour,

Je n’ai pas gardé l’historique du fichier et je ne vais pas pouvoir retrouver mon erreur… :roll_eyes:

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 :grinning:

Bonne continuation…