Виправлення проблем CORS React і Spring Boot: заблокований запит GET

Розуміння помилок CORS у програмах Spring Boot і React

При розробці веб-додатків використовують Реагувати для інтерфейсу і Весняний черевик для серверної частини поширеною проблемою, з якою стикаються розробники, є сумнозвісна помилка CORS. Ця помилка виникає, коли браузер блокує запит з міркувань безпеки, особливо під час спроби підключитися до серверної служби, розміщеної на іншому порту чи домені. У цьому випадку ви маєте справу з проблемою CORS під час створення a GET запит від React до Spring Boot API.

Зазвичай повідомлення про помилку вказує на те, що браузер блокує ваш запит, оскільки Access-Control-Allow-Origin заголовок відсутній або неправильно налаштований. Варто зазначити, що такі інструменти, як Листоноша не встановлюйте ці обмеження безпеки, тому ваш запит може ідеально працювати в Postman, але не працюватиме у браузері.

У вашому сценарії повідомлення про помилку вказує на те, що передпочатковий запит не проходить перевірку контролю доступу. Зазвичай це трапляється, коли певні заголовки чи методи не дозволені або належним чином налаштовані в політиці CORS сервера. Хоча конфігурація CORS, здається, встановлена ​​на стороні сервера, можуть виникнути певні проблеми з тим, як вона обробляє запити браузера.

Ця стаття допоможе вам зрозуміти першопричину проблеми та підкаже можливі способи вирішення проблеми Помилка CORS у вашій програмі React і Spring Boot.

Обробка помилок CORS у завантажувальних програмах React і Spring

Наведені вище сценарії спрямовані на вирішення проблеми Помилки CORS у налаштуваннях інтерфейсу React і бекенда Spring Boot. Помилка виникає, коли інтерфейс, розміщений на 'http://localhost:8081', намагається зробити запит GET до Spring Boot API, розміщеного на 'http://localhost:8080'. Браузери застосовують суворі правила безпеки, щоб запобігти неавторизованим перехресним запитам, тому існують ці політики CORS. The WebMvcConfigurer клас у серверній конфігурації Spring Boot допомагає визначити правила CORS, які дозволяють конкретні джерела та методи, зрештою вирішуючи проблему.

У серверній частині файл `CorsConfig.java` визначає клас конфігурації Spring Boot. The @Бін і @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, який імітує справжній запит перед друком, зроблений браузером. Тест перевіряє, чи містить відповідь правильні заголовки, наприклад Access-Control-Allow-Origin, що дозволяє перехресні запити з інтерфейсу. Метод `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 (Cross-Origin Resource Sharing) у сучасних веб-додатках надзвичайно важливо розуміти наслідки безпеки, які стоять за цим. CORS реалізовано як захід безпеки браузерами, щоб запобігти зловмисним веб-сайтам робити неавторизовані запити API від імені користувачів. Це особливо важливо в сценаріях, коли конфіденційні дані обмінюються між зовнішніми та серверними службами, як-от маркери автентифікації та облікові дані користувача. Під час налаштування CORS у серверній частині Spring Boot важливо дозволити лише надійним джерелам доступ до захищених ресурсів, що робить конфігурацію безпеки ключовим елементом архітектури системи.

Іншим важливим аспектом є обробка запитів перед друком, які є автоматичними запитами, зробленими браузером перед фактичним запитом GET або POST. Це відбувається, коли клієнту потрібно підтвердити, чи сервер дозволяє перехресні запити та підтримує певні заголовки чи методи. У деяких випадках неправильні конфігурації в роботі з ними передпольотні запити може спричинити проблеми, що призведе до помилок CORS, навіть якщо фактичний запит добре працює в таких інструментах, як Postman. Налаштування `CorsRegistry` Spring Boot за допомогою правильних заголовків і методів гарантує правильну обробку запитів перед друком, забезпечуючи плавну взаємодію між інтерфейсом і сервером.

Крім того, обробка CORS не повинна бути статичною або універсальною. У динамічних середовищах, таких як ті, що керуються мікросервісами, різні API можуть мати різні вимоги до безпеки. Деяким API може знадобитися лише розкривати певні методи, тоді як іншим може знадобитися суворіший контроль над походженням. Саме тут стає важливою точна настройка конфігурації CORS для кожної кінцевої точки. Належне керування CORS також допомагає оптимізувати продуктивність API, зменшуючи кількість непотрібних запитів перед друком і забезпечуючи плавну взаємодію з користувачем.