[react]CORSエラーの解決

上記のエラーは、APIを呼び出すときによく発生するエラーです.
これは、クライアントアドレスとAPI要求アドレスの違いによるものである.
reactを使用すると、npmをダウンロードして解決できます.

1.http-proxy-ミドルウェアパッケージのダウンロード

yarn add http-proxy-middleware

2. setupProxy.jsファイルの作成

srcフォルダの真下にsetupProxyが必要です.jsを作成する必要があります.
これにより、エージェント設定が認識されます.
今setupProxyです.jsに次のコードを挿入します.

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: '<< 요청할 API 주소 >>',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  )
}

ここでは、/apiで始まるuriでリクエストを発行すると、pathRewriteは自動的にターゲットアドレスに変換されてリクエストを送信します。

targetがwww.google.comである場合、私たちはfetch('/api/search')に要求を送信し、実際にはwww.google.com/searchに要求を送信します.

3./apiリクエスト

fetchやaxiosなどのAPIリクエストを使用するようにリクエストを送信できるようになりました.
前述したように、既存のuriの前に/apiを付加することに注意すべきである.
私の場合:

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  headers: {
    ...
  },
})

export const get = async (id: number) =>
  await api.get(`/contents/${id}`).then(({ data }) => data)

は必ずしも/apiである必要はありません.私たちはここでいくつかの汎用性の仕事をしただけなので、ポリシーや要求に応じて/api部分を変更することができます.

注意が必要なのはsetupProxyです.jsの/api部分とbaseUrlの/api部分は同じでなければならない.

4.反応を再開する

http-proxy-middleware setupProxyをインストールしました.jsで触れたappは最終的にサーバを意味する.
ソフトウェアパッケージを使用すると、サーバ上で必要な操作を簡素化できます.

最後に、変更を反映するには、サーバの一部が同じであるため、設定後に再起動する必要があります。

ctrl + cを押して応答を終了し、npm run startまたはyarn startを押して応答を再実行します.
ここに来たら、CORSエラーではなく、正常に応答を受信できます!

オプションを選択します。Netlify導入でのエージェントの適用

http-proxy-middlewareは、ローカルモードの開発時には良好な応答を示しますが、導入時にCORSエラーが発生します.
netlifyに配置すると、簡単に設定を追加できます.
rootロケーションにnetlify.tomlファイルを作成します.

[[redirects]]
  from = "/api/*"
  to = "<< API 요청할 주소>> /:splat"
  status = 200

上のコードを追加します.
前は/apiで、ここも/api/*です.
API要求のアドレスの後に/:splatを付けなければならない.:splatと*の意味は同じです.
netlifyに配備された後も、リクエスト/応答は正常であることがわかります.