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

8589 ワード
React node.js テキストリンク
  • 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サーバが実行されます.

    コンソールウィンドウが正しく接続されていることを確認します.
    • オブジェクト向け練習1
    Python Web Bootstrap