Исправление ошибок CORS с помощью React Proxy: простое решение

Многое зависит от того, что вы используете в качестве среды разработки, традиционное приложение Create-React или новый тренд. Я предпочитаю Vite, он выделяется тем, что он удивительно быстр и очень быстро настраивается, что является большим преимуществом.

Теперь, если вы создаете веб-приложение, используя React, популярную библиотеку JavaScript. Вашему приложению может потребоваться взаимодействие с сервером для получения данных или выполнения действий, таких как отправка и получение информации.
Однако, когда ваше приложение React в одном домене (например, на локальном хосте, где вы разрабатываете свое приложение) пытается связаться с сервером в другом домене (например, с сервером API) он часто сталкивается с ограничениями безопасности, известными как проблемы CORS (Cross-Origin Resource Sharing). Эти ограничения введены для предотвращения потенциальных угроз безопасности.

Вы можете настроить «прокси», который действует как посредник между вашим приложением React и сервером API.

В этой статье я расскажу, как настроить прокси-сервер в Vite, а затем в Create-react-app.

Не забудьте заменить http://localhost:8800 фактическим URL-адресом вашего внутреннего сервера. Поскольку в моем примере с внутренним сервером я использую порт 8800, этот код работает для меня.

ВИТЭ

В отличие от того, как мы это делаем в create-act-app, мы собираемся внести изменения в vite.config.js нашего react_app (имя папки).
Ниже приведен скриншот для лучшего понимания.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


export default defineConfig({ 
  server: {
    proxy: {
      "/api": "http://localhost:8800",
    }  
  } ,
  plugins: [react()],
})

export default defineConfig({ ... }): Эта часть настраивает параметры по умолчанию для вашего проекта Vite.
server: { ... }: В конфигурации вы указываете параметры, относящиеся к серверу разработки.
proxy: { ... }: В настройках сервера вы настраиваете конфигурацию прокси. Здесь вы определяете, какие URL-адреса ваше приложение должно проксировать на другой сервер.
"/api": "http://localhost:8800": Вы говорите, что всякий раз, когда ваше приложение React пытается сделать запрос к URL-адресу, начинающемуся с «/api», сервер разработки должен перенаправить этот запрос на http://localhost:8800. Это полезно, поскольку ваш сервер API может работать на другом порту (в данном случае 8800), и без этого прокси-сервера вы можете столкнуться с проблемами CORS.
plugins: [react()],: Эта часть добавляет плагин React в вашу конфигурацию Vite, который помогает Vite понимать и обрабатывать компоненты React.

В веб-приложении, которое я разрабатывал, мне нужно было выполнить запрос GET, и вот как я это сделал:

const getPins = async () => {
      try {
        const allPins = await axios.get("/api/pins");
        setPins(allPins.data);
      } catch (err) {
        console.log(err);
      }
    };

Создать-реагировать-приложение

В Create React App вы можете настроить прокси для разработки прямо в файле package.json. Просто добавьте еще одну зависимость в этот длинный список, присутствующий в вашем файле package.json.

{
   "proxy": "http://localhost:8800",
}

Теперь, если ваше приложение React делает запрос к /api/pins, а сервер разработки не имеет соответствующего маршрута, оно перенаправит запрос на http://localhost:8800.

Исправление ошибок CORS с помощью React Proxy: простое решение

Вопросы по теме