Proč byste měli používat proxy server s aplikací Create React

Napsal Joel Adewole✏️

Úvod

Existuje mnoho případů, kdy vývojáři potřebují využívat API z backendu při používání Create React App (CRA) k sestavení aplikace. Protože většina klientských aplikací je hostována na jiných serverech než backendová aplikace, dochází ke komplikacím, které vznikají v důsledku požadavků zasílaných přes oba servery. CRA podporuje proxy pro zmírnění nebo úplné odstranění těchto problémů.

V tomto článku probereme, co je proxy server, proč byste měli používat proxy server ve vývoji a případy použití pro proxy požadavky v aplikaci React. Poté implementujeme reálný příklad nastavení proxy serveru v Reactu.

Obsah

• Co je proxy server?
• Proč byste měli při vývoji používat proxy server
• Případy použití pro proxy požadavky v aplikaci React
• Jak nastavit proxy server v Reactu
• Použití ručně vytvořeného proxy v aplikaci Create React
• Závěr

Co je proxy server?

Proxy server je systém nebo aplikace, která funguje jako kanál mezi klientskou aplikací a serverem, když požaduje prostředky.

Výše uvedený diagram ukazuje, jak proxy servery fungují. Když zadáte požadavek na server, je směrován přes proxy, který obdrží odpověď od serveru a přenese informace zpět klientovi.

Proč byste měli ve vývoji používat proxy server

Možná se ptáte, proč je nutné směrovat některé požadavky přes proxy před jejich odesláním na server. Následující scénáře vyžadují použití serveru proxy:

Potřebujete chránit svého klienta před útoky napříč weby? Proxy servery přidávají další stupeň ochrany tím, že umožňují ověření odpovědí serveru před doručením klientovi. Mohou být použity jako webové filtry a firewally.

Aby se předešlo zhroucení, musí být zachována šířka pásma a musí být regulován provoz serveru. Proxy servery mohou ukládat požadavky a odpovědi serveru do mezipaměti, takže ne všechny dotazy jsou přenášeny na server ve stejnou dobu. To se obvykle provádí při práci se statickými informacemi a velkými soubory.

Proxy servery jsou užitečné, když musí být klientská data chráněna nebo musí být požadavek podán anonymně. Proxy servery neposkytují serveru informace, jako je umístění klienta nebo adresa IP. Protože požadavky nejsou odesílány na známé síti, pomáhá to klientům udržet jejich data v soukromí tím, že brání hackerům zachytit důležité informace.

Proxy servery navíc mohou určit, které požadavky jsou povoleny a které ne. A konečně, proxy servery lze použít k protokolování požadavků a klientů, kteří je zadávají v organizacích, které to vyžadují.

Příklady použití pro proxy požadavky v aplikaci React

Poté, co pochopíte, proč jsou proxy servery vyžadovány, je důležité porozumět reálným scénářům, ve kterých lze proxy servery implementovat. Některé příklady proxy požadavků v aplikacích React jsou uvedeny níže.

První je požadavek na HTTPS API ve vývoji (https://localhost ). Prohlížeče mají omezení mezi původy, která blokují požadavky HTTPS API z HTTP webů běžících na localhost. Proxy servery mohou pomoci s přesměrováním požadavků na rozhraní API, aniž by museli používat výchozí možnosti požadavku prohlížeče, což pomáhá vyhnout se několika omezením mezi původy.

Druhým je načítání dat z rozhraní API různých zdrojů, která nepodporují COR ve webových prohlížečích. Některá rozhraní API, bez ohledu na Hypertext Transfer Protocol, nepodporují COR z bezpečnostních důvodů a prohlížeče uplatňují zásady stejného původu, aby chránily uživatele před skriptováním mezi weby (XSS). Proxy servery lze použít k volání API a poté k přenosu výsledků do webového prohlížeče.

Nakonec je zde získávání mediálních zdrojů ze serveru. Proxy server lze použít k ukládání mediálních souborů ze serveru do mezipaměti, což eliminuje potřebu posílat na server požadavky na takové soubory pokaždé, když jsou potřeba.

Jak nastavit proxy server v Reactu

Existují dva běžné přístupy k nastavení proxy serverů v aplikacích React vyvinutých pomocí CRA. Máme výchozí možnost proxy CRA a také balíček npm http-proxy-middleware.

Upozorňujeme, že tyto metody jsou účinné pouze při vývoji. Pro implementaci proxy ve výrobě doporučuji postupovat podle těchto pokynů:

• Jak implementovat proxy server v Express
• Jak používat Nginx jako reverzní proxy server

Nejprve nastavíme aplikaci s CRA, abychom mohli nastavit proxy servery.

Vytvořit nastavení aplikace React

Ujistěte se, že máte na svém počítači nainstalovaný Node, abyste mohli používat CRA. Poté v novém adresáři spusťte terminál a spusťte následující příkaz:

npx create-react-app proxyclient && cd proxyclient

Výše uvedený příkaz vytvoří nový adresář s názvem proxyclient a nastavte adresář terminálu na /proxyclient . Složka by měla obsahovat následující složky a soubory:

package.json soubor by měl mít také podobnou strukturu:

{
  "name": "proxyclient",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Upravte App.js soubor v src složku, která obsahuje následující kód:

import React, { useEffect } from 'react'
const App = () => {
  useEffect(() => {
    fetch('https://google.com/search?q=javascript')
      .then(resp => {
        console.log(resp);
        console.log('======success=======');
      })
      .catch(err => {
        console.log('======failure=======');
        console.log(err);
      });
  }, [])
  return (
    <div>App</div>
  )
}
export default App

Nahoře fetch Funkce se používá k vytvoření požadavku na cross-origin URL https://google.com/search?q=javascript .

Poté by měl být spuštěn aplikační server, abychom mohli zobrazit odpověď. Spuštěním následujícího příkazu v terminálu adresáře projektu spusťte aplikační server:

npm start

Ve výchozím nastavení začne výše uvedený příkaz naslouchat na portu 3000 na localhost nebo 127.0.0.1 . Pokud otevřete prohlížeč a zadáte „localhost:3000“, měli byste v konzole vidět něco takového:

Použití výchozího proxy serveru CRA

Abychom se tomuto problému vyhnuli, definujeme výchozí proxy server naší ratingové agentury vložením proxy pole v package.json soubor jako tento:

{
  ...,
  "proxy": "https://www.google.com",
  ...
}

Poté v App.js soubor, změňte požadavek na načtení takto:

fetch('/search?q=proxy')

Výše jsme odstranili původ a strukturovali adresu URL požadavku, jako by se jednalo o požadavek stejného původu. Požadavek by měl být úspěšný, jak je znázorněno v konzole prohlížeče. Mělo by to vypsat něco takového:

Všimněte si adresy URL v odpovědi; byl přenesen do prohlížeče jako stejný původ, což vedlo k http://localhost:3000/search?q=proxy a chyba CORs byla pryč. Prohlížeč přijme požadavek a odešle ho proxy serveru, který pak přesměruje požadavek na skutečný API server uvedený v package.json soubor.

Můžeme také zadávat požadavky na několik serverů zadáním tras, které by měly být použity k cílení na konkrétní doménu. Abychom toho dosáhli, strukturujeme naše proxy pole v package.json soubor takto:

{
  ...,
  "proxy": {
    "/search" : {
      "target" : "https://www.google.com",
      "changeOrigin" : true
    },
    "/jobs" : {
      "target" : "https://stackoverflow.com",
      "changeOrigin" : true
    }
  }
  ...
}

Výše jsme definovali dva paths :/search a /jobs , které cílí na dvě samostatné domény.

Když provedeme požadavek na načtení na /jobs , prohlížeč odešle požadavek jako http://localhost:3000/jobs , ale proxy server jej předá jako https://stackoverflow.com/jobs .

Použití ručně vytvořeného proxy v Create React App

Pokud nechcete používat výchozí proxy CRA, můžete použít http-proxy-middleware npm balíček. Pamatujte, že tato funkce je dostupná v [email protected] nebo vyšší.

Tento balíček musí být nainstalován jako závislý projekt, než jej lze použít. Chcete-li to provést, otevřete terminál a proveďte následující příkaz v adresáři projektu:

npm i http-proxy-middleware --save

Ujistěte se, že nemáte proxy definovaný v package.json a poté vytvořte nový soubor s názvem setupProxy.js v src adresář. Přidejte následující fragment kódu do setupProxy.js soubor:

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://www.google.com',
    changeOrigin: true
}
module.exports = function(app) {
  app.use(
    '/search',
    createProxyMiddleware(proxy)
  );
};

Výše uvedený fragment kódu exportuje funkci do aplikace, takže proxy middleware je zaregistrován do aplikace, jakmile se spustí vývojový server, aniž by bylo nutné jej importovat do jakéhokoli souboru. Jakmile je aplikace spuštěna, spustí se automaticky.

Použili jsme createProxyMiddleware od http-proxy-middleware který jsme dříve nainstalovali za účelem registrace cíle proxy pro /search .

V případech, kdy existuje několik cílů proxy, zavoláme jednoduše app.use fungovat následovně:

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://www.google.com',
    changeOrigin: true
}
const proxy2 = {
    target: 'https://www.stackoverflow.com',
    changeOrigin: true,
}
module.exports = function(app) {
  app.use(
    '/search',
    createProxyMiddleware(proxy)
  );

  app.use(
    '/jobs',
    createProxyMiddleware(proxy2)
  );
};

Výše jsme nazvali app.use metodu po vytvoření dalšího objektu s názvem proxy2 který zahrnoval proxy parametry druhé cílové domény za účelem vytvoření proxy middlewaru.

Závěr

Při používání proxy serverů ve svých klientských aplikacích můžete očekávat lepší zabezpečení, důvěrné požadavky, regulované požadavky a další výhody. Nyní, když víte, proč a jak používat dev proxy server s CRA, doporučuji vám jej použít ve vašem příštím projektu.

Neváhejte klást otázky nebo návrhy v sekci komentářů níže.

Plná viditelnost do produkčních aplikací React

Ladění aplikací React může být obtížné, zvláště když uživatelé zaznamenají problémy, které je obtížné reprodukovat. Pokud vás zajímá monitorování a sledování stavu Redux, automatické zobrazování chyb JavaScriptu a sledování pomalých síťových požadavků a doby načítání komponent, vyzkoušejte LogRocket.

LogRocket je jako DVR pro webové a mobilní aplikace, zaznamenává doslova vše, co se děje ve vaší aplikaci React. Namísto hádání, proč k problémům dochází, můžete agregovat a hlásit, v jakém stavu byla vaše aplikace, když k problému došlo. LogRocket také monitoruje výkon vaší aplikace a vytváří zprávy s metrikami, jako je zatížení procesoru klienta, využití paměti klienta a další.

Middlewarový balíček LogRocket Redux přidává do vašich uživatelských relací další vrstvu viditelnosti. LogRocket zaznamenává všechny akce a stav z vašich obchodů Redux.

Modernizujte způsob ladění aplikací React – začněte sledovat zdarma.