ReactおよびExpressでブロックされたクロスオリジン要求

そのため、Reactを使用してデータをバックエンドに送信しようとしたときに、このエラーが発生しました。私が学んだことから、バックエンドと.htaccessファイルでの通信を許可する必要があります。ここに私が使用したリンクのいくつかがあります：

No 'Access-Control-Allow-Origin'-Node/Apache Port Issue

Access-Control-Allow-Originヘッダーはどのように機能しますか？

どちらにもコードがありますが、役に立ちませんでした。

これまでのところ、私のサーバー側コードはこれです：

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();
});

これは私のクライアント側のコードです：

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));
}

だから私は何が欠けていますか？ .htaccessファイルはありませんが、すべてローカルで実行しているため、使用できるかどうかはわかりません。

必要なものはすべて許可しているように見えますが、それだけでは不十分だと思います。

重複としてマークする場合は、少なくとも私の問題が回答でカバーされていることを確認してください。

javascriptnode.jsreactjscors

2018/06/21Alex Ironside

OPTIONSメソッドも許可する必要があります

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

ブラウザは、このリクエストを他のドメインに送信し、このリモートサーバーとの通信方法を確認します。

2018/06/21Peter Wilson