Demande d'origine croisée bloquée avec React et Express

Question

J'ai donc rencontré cette erreur lorsque j'essayais d'envoyer des données à l'arrière-plan à l'aide de React. D'après ce que j'ai appris, je dois autoriser la communication sur le back-end et dans le .htaccess fichier. Voici quelques liens que j'ai utilisés:

Pas de 'Access-Control-Allow-Origin' - Node/Apache Port Issue

Comment fonctionne l'en-tête Access-Control-Allow-Origin?

Les deux ont du code, mais cela n'a pas aidé.

Jusqu'à présent, mon code côté serveur est le suivant:

app.use(function (req, res, next) {
    // Website you wish to allow to connect
    // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'POST');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Voici mon code côté client:

sendMail(e) {
    e.preventDefault();
    var name = document.getElementById('name').value;
    var contactReason = document.getElementById('contactReason').value;
    var email = document.getElementById('email').value;
    var additionalInfo = document.getElementById('additionalInfo').value;
    var body = {
        name: name,
        contactReason: contactReason,
        email: email,
        additionalInfo: additionalInfo,
    };
    console.log(JSON.stringify(body));
    fetch('http://localhost:4000/', {
        method: 'POST',
        body: body,
    }).then(r => console.log(r)).catch(e => console.log(e));
}

Alors qu'est-ce qui me manque? Je n'ai pas de .htaccess fichier, mais je fais tout cela localement, donc je ne sais pas si je peux même l'utiliser.

Il me semble que j'autorise tout ce dont j'ai besoin, mais je suppose que ce n'est pas suffisant.

Si vous souhaitez marquer comme doublon, assurez-vous au moins que mes problèmes sont couverts par la réponse.

Answer 1

vous devez également autoriser la méthode OPTIONS

res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');

le navigateur l'envoie avec toute demande de publication à un autre domaine pour vérifier comment il communiquera avec ce serveur distant.