登録/会員入力-#16 COSホットスポット、Proxy設定

CORSホットスポット

axios通信とともに発生するCORSに関する問題を解決しようとした.
まず、エラーの原因は、サーバポートが5000、クライアントが3000であることです.互いに異なるアドレスがあるため、通信が制限されている.最大の原因は警備員のためだ.Cross Origin Resource Sharingの略語は、その名の通り、地域をまたぐリソースを共有する設定があまりよくありません.
では、この問題を解決するには、
サーバ側が解決できる方法は、まずCORSというモジュールをダウンロードする.
さらにcorsの起源をclientとして位置づけると、そのclientからのリクエストは許可される.

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors({
  origin: client의 url,
  credentials: true, 
}));

もう一つの方法はProxyを使うことです.

Proxy Server

Proxyをフロントエンドからバックエンドに設定すると、Proxyを1回通過します.

IpiはProxy Serverで任意に交換できます.
そのため,インターネット上では訪問者のIPを知ることができない.
また、送信されたデータも任意に変更できます.
機能には、ファイアウォール機能、Webフィルタ機能、キャッシュデータなどがあります.
なぜ使用しますか?

インターネット利用制御

キャッシュ高速インターネット

を提供

セキュリティ

有限サイト

にアクセス可能
では、これらをどのように利用してCORS問題を解決するのか.
それはhttp-proxy-middlewqreでいいです.
端末ではnpm install http-proxy-middleware --saveを使用してモジュールをダウンロードする.
その後、srcフォルダの下にsetupProxy.jsファイルを作成します.
ファイル内では、以下のように作成します.

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

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',// 서버의 url
      changeOrigin: true,
    })
  );
};

前述したように、エージェントは、サーバに入る前に、クライアントのipをサーバと同じように変更します.
では,サーバ上のCORS問題も解決された.
(個人的には、この方法と比較して、上述したCORSモジュールを受け入れ、サーバ側にoriginを設定することが望ましいと考えられる).
Proxyを設定し、ログインページのaxiosセクションでhttp://localhost:5000を除き、残りのエンドポイントのみが送信される.
このように書き、アプリケーションを実行してルートディレクトリに移動すると

上図に示すように、안녕 세상아!がコンソールによく表示され、CORSエラーが消えていることがわかります.