CORSエラーによりサーバにデータを渡せない

Question

前提・実現したいこと

Vue.js、Quasar、Node.js、Firebaseを使用して簡単な記録アプリを作っています。
現在データ登録機能を実装中ですが、ブラウザでデータ登録時に以下のCORSエラーが発生します。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://localhost:3000/createRecord' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

'Access-Control-Allow-Origin'はバックエンドで設定しているはずなのに。。。

該当のソースコード

フロントエンド

methods: {
    createRecord() {

      let formData = new FormData();
      formData.append("test", this.record.test);
      formData.append("date", this.record.date);

      this.$axios
          .post(`${process.env.API}/createRecord`, formData)
          .then(response => {
            console.log("response: ", response);
           })
           .catch(err => {
             console.log("err: ", err);
           });
    )

バックエンド

app.post('/createRecord', (request, response) => {
    response.header('Access-Control-Allow-Origin', '*'),
        db.collection('records').add({
            test: request.body.test,
            date: request.body.date
      }).then(() => {
        response.send('Record added')
      })
    console.log(request.body)
    })

試したこと

axiosではなくfetchAPIを用いて以下のように実装しましたが、引き続きcorsエラーが発生し解決しませんでした。

フロントエンド

//省略//

let formData = {
        test: this.record.test,
        date: this.record.date,
}

fetch(`${process.env.API}/createRecord`, {
          method: "post",
          mode: "cors",
          cache: "no-cache",
          credentials: "include",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(formData)
        })
//省略//

バックエンドでは以下を追加してみましたが、解決に至りませんでした。

    response.header('Access-Control-Allow-Origin', '*'),
    response.header('Access-Control-Allow-Headers', 'Content-Type'),
    response.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'),
    response.header('Access-Control-Max-Age', '600');

fetchAPIでmode: "no-cors"にするとデータ登録が可能ですが、セキュリティ面で危ないということでしたので、mode: "cors"の状態でデータを登録したいです。

corsについての知識が浅いため、フロント・バックエンド共にどのような実装にすべきか分からない状態です。
どなたかご回答いただけると幸いです。

Answer 1

エラーメッセージに "Response to preflight request doesn't pass access control check" とあるので、プリフライトリクエストの処理が抜けているということでしょう。app.optionsメソッドが必要なのではないですか?

---

（追記）
以下のようにapp.optionsを追加したらどうでしょうか?

// app.optionsを追加
app.options('*', (request, response) => {
  response.header('Access-Control-Allow-Origin', '*'),
  response.header('Access-Control-Allow-Headers', 'Content-Type'),
});

// app.postはそのまま
app.post('/createRecord', (request, response) => {
    response.header('Access-Control-Allow-Origin', '*'),
        db.collection('records').add({
            test: request.body.test,
            date: request.body.date
      }).then(() => {
        response.send('Record added')
      })
    console.log(request.body)
    })

Comments

[malfoy_]

ご回答ありがとうございます！
以下の記載を追記したところ、"Response to preflight request doesn't pass access control check" のエラーは解消いたしました。

app.options.set('Access-Control-Request-Headers', 'Content-Type')

しかし、”No 'Access-Control-Allow-Origin' header is present on the requested resource.”の部分のエラーに関しては未だに解消できていません。

Originに以下のような設定を施しましたが、問題解決には至りませんでした。

response.header('Access-Control-Allow-Origin', 'https://localhost:8080')

app.optionsで他にも設定が必要な項目があるのでしょうか。

[ockeghem]

ちょっと見当違いの方向にいっているようです。以下の記事などが参考になりませんか?
https://s8a.jp/node-js-express-http-options

[malfoy_]

ありがとうございます！
共有いただいた記事を参考に以下の記載に修正したところ、エラーが解消しました。

response.header('Access-Control-Allow-Origin', request.headers.origin);
response.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
response.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
response.header('Access-Control-Allow-Credentials', true);
response.header('Access-Control-Max-Age', '86400');
response.sendStatus(200);

[ockeghem]

その方法では脆弱性があります。'Access-Control-Allow-Origin' に対する値は '*' にして、'Access-Control-Allow-Credentials', true は削除してください。質問本文に（追記）とした方法が安全です。