コードは、前回のコードを使用します。

フロント部分は、React で作成しました。

試しにブラウザからデータを取得してみます。

image2

データを取得する時、エラーが発生しています。

これは、CORS エラーと言います。

バックエンドと異なるドメインでは、API のやりとりが許可されていないとエラーが発生します。

このエラーを解消するには、バックエンド側で API のやりとりを許可しないといけません。

index.js で、setHeaderを使って設定します。

まずは、Access-Control-Allow-Origin を設定します。

これは、どのドメインを許可するかを指定することができます。

今回は、全ての URL を指定するために、『*』を指定します。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*")
})

次に、やりとりの方法を指定するために、Access-Control-Allow-Methods を設定します。

今回は、『GET, POST, PUT, PATCH, DELETE, OPTION』、一通り設定します。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTION"
  )
})

そして、Access-Control-Allow-Headers でヘッダー内のデータタイプも設定します。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTION"
  )
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization")
})

ルート処理するために、nextを呼び出します。

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTION"
  )
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization")
  next()
})

これで、CORS の設定が完了したので、ブラウザをリロードして確認してみます。

image3

無事、API を取得することができました。

ブログ一覧