[TIL]COSイベント(proxy)

卒業プロジェクトを行う場合は、会員登録ページを実現します.これは簡単かと思いましたが、非常に困難で、学習ノード、反応シリーズ-基本コースでモンゴDBを利用して、フロント、バックグラウンドサーバの通信がどのように動いているのかを少し知ります…!
ノードjs上にバックグラウンドサーバが構築され、フロントでaxiosを使用してrequestを送信中にこのエラーが発生します.

現在、バックグラウンドサーバには5000ポートがあり、クライアントサーバには3000ポートが要求されています.
この2つの異なるポートを持つサーバは、設定なしにリクエストを送信できません!!警備の問題で、こんな問題がありました.
domain-a.comではドメインがWebサーバであるため互いに交換可能であるが(同源)domain-b.comでコミュニケーションを行うとCORSポリシーによって制御される.
これらの問題を解決する方法はいろいろあり、教室でProxyで解決しました.
square add http-proxy-ミドルウェアダウンロードライブラリの使用
ダウンロードした場合は、srcフォルダでproxyを設定します.jsでファイルを作成する
作成した場合は、ファイルにコードを記述します.

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

現在、クライアントには3000台のバックグラウンドサーバ5000台があり、これはターゲットマシンを5000台に割り当てることを意味します.

//./server/index.js

app.get("/api/hello", (req, res) => {
  res.send("hello");
});

サーバはhello文字列を応答として送信した.

//./client/LandingPage.js
useEffect(() => {
    axios.get("/api/hello").then((res) => console.log(res));
  }, []);

フロントはgetで応答を受信

CORSポリシーによるエラーは発生せず、データ通信が良好