Обработка ошибок перекрестного происхождения в React: методы и примеры - Fcodenotes

В приложениях React возникновение ошибок перекрестного происхождения может быть частым явлением при отправке HTTP-запросов к внешним API или ресурсам. Эти ошибки возникают, когда запрос делается из одного домена (источника) в другой, а принимающий сервер не разрешает доступ из-за ограничений безопасности. В этой статье мы рассмотрим различные методы обработки ошибок перекрестного происхождения в React, а также приведем примеры кода.

Использование заголовков CORS.
Одним из основных способов обработки ошибок перекрестного происхождения является настройка сервера на включение заголовков совместного использования ресурсов перекрестного происхождения (CORS) в его ответы. Заголовки CORS указывают, каким доменам разрешен доступ к ресурсам сервера. Включив CORS на сервере, вы можете контролировать и разрешать определенным источникам доступ к запрошенным ресурсам.

Вот пример настройки заголовков CORS на сервере Node.js/Express:

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // Replace '*' with specific origin(s) to restrict access
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});
// Rest of the server code

JSONP (JSON с дополнением):
Другой подход к обходу ошибок перекрестного происхождения — использование JSONP, метода, позволяющего получать данные из другого домена. JSONP работает путем внедрения тега <script>в DOM, который загружает удаленный файл JavaScript, содержащий данные ответа. Сервер отвечает функцией обратного вызова, и данные передаются в качестве аргумента этой функции.

Вот пример использования JSONP в компоненте React:

import React, { useEffect, useState } from 'react';
const fetchData = () => {
  const script = document.createElement('script');
  script.src = 'https://api.example.com/data?callback=handleData';
  document.body.appendChild(script);
};
const handleData = (data) => {
  // Process the retrieved data here
};
const MyComponent = () => {
  useEffect(() => {
    fetchData();
  }, []);
  return <div>...</div>;
};
export default MyComponent;

Прокси-сервер.
Если настройка на стороне сервера невозможна или требует дополнительных сложностей, вы можете настроить прокси-сервер для обработки запросов между источниками. Прокси-сервер действует как посредник между клиентом и внешним API, отправляя запрос из того же источника и пересылая ответ обратно клиенту.

Вот пример использования прокси-сервера с create-react-app:

Создайте файл setupProxy.jsв корне вашего проекта React:

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

Обновите запросы API, чтобы использовать URL-адрес прокси-сервера:

const apiUrl = '/api/data';
// Make requests to `apiUrl` instead of the external API endpoint

Ошибки перекрестного происхождения — распространенная проблема при работе с приложениями React, которые взаимодействуют с внешними ресурсами. Используя такие методы, как настройка заголовков CORS, использование JSONP или настройка прокси-сервера, вы можете преодолеть эти ошибки и обеспечить бесперебойную связь между вашим приложением React и внешними API.

Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта и соображениям безопасности.

Реализуя эти методы обработки ошибок перекрестного происхождения, вы можете повысить надежность и производительность своих приложений React.