Исправление проблем React и Spring Boot CORS: заблокированный запрос GET

Понимание ошибок CORS в приложениях Spring Boot и React

При разработке веб-приложений с использованием Реагировать для фронтенда и Весенние ботинки Что касается серверной части, распространенной проблемой, с которой сталкиваются разработчики, является печально известная ошибка CORS. Эта ошибка возникает, когда браузер блокирует запрос по соображениям безопасности, особенно при попытке подключения к серверной службе, размещенной на другом порту или домене. В этом случае вы имеете дело с проблемой CORS при создании ПОЛУЧИТЬ запрос от React к Spring Boot API.

Сообщение об ошибке обычно указывает на то, что браузер блокирует ваш запрос, поскольку Доступ-Контроль-Разрешить-Происхождение заголовок либо отсутствует, либо настроен неправильно. Стоит отметить, что такие инструменты, как Почтальон не применяйте эти ограничения безопасности, поэтому ваш запрос может отлично работать в Postman, но не работать в браузере.

В вашем сценарии сообщение об ошибке указывает, что предполетный запрос не проходит проверку управления доступом. Обычно это происходит, когда определенные заголовки или методы не разрешены или неправильно настроены в политике CORS сервера. Хотя конфигурация CORS, по-видимому, присутствует на стороне сервера, могут возникнуть определенные проблемы с обработкой запросов браузера.

Эта статья поможет вам понять основную причину проблемы и предложит возможные решения для ее устранения. Ошибка CORS в вашем приложении React и Spring Boot.

Обработка ошибок CORS в приложениях React и Spring Boot

Сценарии, представленные выше, направлены на решение проблемы Ошибки CORS в настройке интерфейса React и бэкэнда Spring Boot. Ошибка возникает, когда интерфейс, размещенный на «http://localhost:8081», пытается выполнить запрос GET к API Spring Boot, размещенному на «http://localhost:8080». Браузеры применяют строгие правила безопасности для предотвращения несанкционированных запросов из разных источников, поэтому существуют эти политики CORS. Вебмвкконфигуратор Класс в конфигурации бэкэнда Spring Boot помогает определить правила CORS, которые разрешают определенные источники и методы, что в конечном итоге решает проблему.

В серверной части файл CorsConfig.java определяет класс конфигурации Spring Boot. @Бин и @Override аннотации используются для внедрения и настройки конфигурации CORS. В методе addCorsMappings() функцияallowedOrigins() явно разрешает запросы от http://localhost:8081, гарантируя, что браузер распознает этот источник как доверенный источник. Включение `allowedMethods()` гарантирует, что все методы HTTP, включая GET, POST и OPTIONS, разрешены. Это очень важно, поскольку браузеры обычно отправляют предполетный запрос OPTIONS, чтобы проверить, разрешен ли фактический запрос GET.

На внешнем интерфейсе React обрабатывает запросы, используя Аксиос, популярный HTTP-клиент. В функции fetchData файла ProjectPage.tsx функция axios.get() отправляет запрос GET на серверную часть Spring Boot. Для параметра withCredentials установлено значение true, что позволяет отправлять файлы cookie и учетные данные аутентификации вместе с запросом. Кроме того, включается заголовок авторизации для передачи токена пользователя, гарантируя правильную аутентификацию запроса. Без этих конфигураций браузер заблокировал бы запрос по соображениям безопасности.

Наконец, файл модульного теста CorsTest.java проверяет, что конфигурация CORS работает должным образом. Этот тест имитирует запрос HTTP OPTIONS к серверному API, который имитирует реальный предполетный запрос, сделанный браузером. Тест проверяет, содержит ли ответ правильные заголовки, например Доступ-Контроль-Разрешить-Происхождение, что позволяет выполнять запросы из внешнего интерфейса между источниками. Метод MockMvcResultMatchers.header() гарантирует, что сервер правильно отвечает на предполетные запросы. Включая модульные тесты, разработчики могут гарантировать, что их конфигурация CORS надежна и функциональна в различных средах.

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

Изучение CORS в контексте безопасности и проектирования API

Когда имеешь дело с CORS (совместное использование ресурсов между источниками) в современных веб-приложениях крайне важно понимать последствия этого для безопасности. CORS реализован в браузерах как мера безопасности, позволяющая предотвратить несанкционированные запросы API от имени пользователей вредоносными веб-сайтами. Это особенно важно в сценариях, где между внешними и внутренними службами происходит обмен конфиденциальными данными, такими как токены аутентификации и учетные данные пользователя. При настройке CORS в бэкэнде Spring Boot важно разрешить доступ к защищенным ресурсам только доверенным источникам, что делает конфигурацию безопасности ключевым элементом архитектуры системы.

Еще одним важным аспектом является обработка предполетных запросов, которые представляют собой автоматические запросы, выполняемые браузером перед фактическим запросом GET или POST. Это происходит, когда клиенту необходимо подтвердить, разрешает ли сервер запросы между источниками и поддерживает ли определенные заголовки или методы. В некоторых случаях неправильные настройки при обработке этих предполетные запросы может вызвать проблемы, приводящие к ошибкам CORS, даже если фактический запрос работает нормально в таких инструментах, как Postman. Настройка CorsRegistry Spring Boot с правильными заголовками и методами гарантирует правильную обработку предварительных запросов, обеспечивая плавное взаимодействие между интерфейсом и сервером.

Более того, обработка CORS не должна быть статичной или универсальной. В динамических средах, таких как те, которые управляются с помощью микросервисов, разные API могут предъявлять разные требования к безопасности. Некоторым API может потребоваться предоставлять только определенные методы, тогда как другим может потребоваться более строгий контроль над происхождением. Именно здесь становится важной точная настройка конфигурации CORS для каждой конечной точки. Правильное управление CORS также помогает оптимизировать производительность API за счет сокращения ненужных предполетных запросов и обеспечения плавного взаимодействия с пользователем.