REDOノード・サーバとの連携

cra完了反応項目作成

サーバプロジェクト完了

ノードサーバ/レスポンスサーバとは独立
->この3点に基づいて記事を書く.

Proxyを使用する理由

通常はセキュリティおよびパフォーマンスに使用されます

React開発時に使用したアドレスは実際の配備アドレスとは異なり、ハードコーディングを行うと変更しにくい.

proxy設定はbaseurlを省略してコードを記述することができる.
->つまり、proxyを設定するコードを1行変更するだけです.

応答をサーバに関連付ける

setupProxy.js

리액트_프로젝트/src以下にsetupProxy.jsファイルを生成する.

npm install http-proxy-middlewareを使用してモジュールをインストールします.

setupProxy.jsコンテンツ合成

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

module.exports = (app) => {
    app.use(
        createProxyMiddleware('/api', {
            target: 'http://localhost:5000/', // 노드 서버 주소
            changeOrigin: true
        })
    )
}

target: axios.get("/api/login")を使用して、リクエスト前に追加された基本url

changeOrigin:ターゲットサーバ構成に従ってホストヘッダを変更

ここまで設定すれば完成!
+)craを使用して反応項目を作成した場合は、package.jsonにproxy: ~を設定することもできます.

単純テスト

Node.jsで非常に簡単なサーバを作成してテストすることができます.
1.노드_프로젝트/index.jsファイルを作成します.
モジュールを2.npm install corsでインストールします.
3.index.jsファイルコンテンツの作成

// 노드_프로젝트/index.js
const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors()); 

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

app.listen(5000); // React가 3000번 포트를 사용하므로 다른 포트를 지정해주는게 좋다.

CORS(Corss-origin Resource Sharing):HTTPリクエストが自分の他のドメイン/プロトコル/ポート上のリソースに属さないリクエスト方式.
corsモジュールの詳細については、こちらです。を参照してください.

npm install axiosパッケージをインストールします.

리액트_프로젝트/src/App.js|にテストコードを記述します.

// 리액트_프로젝트/src/App.js
import axios from "axios";
import {useEffect} from "react";

function App() {
  const sendRequest = async() => {
    const res = await axios.get('/api');
    console.log(res.data);
  };

  useEffect(()=>{
    sendRequest();    
  });

  return (
    <div className="App">
    </div>
  );
}

export default App;

Node.jsとreactサーバが実行されます.

コンソールウィンドウが正しく接続されていることを確認します.