Блог

Главная - Вопросы по программированию - React: как использовать axios/fetch для получения данных из API, работающего на локальном хосте?

React: как использовать axios/fetch для получения данных из API, работающего на локальном хосте?

#reactjs #typescript #spring-boot

Вопрос:

У меня есть API rest для весенней загрузки, который я запускаю на своем http://localhost:8080 . Я создаю интерфейс в React, и я хотел бы использовать API, но что-то не работает.

У меня есть этот код:

 componentDidMount() {
  axios.get('https://jsonplaceholder.typicode.com/users')
    .then(res => {
      console.log(res);
    });

  axios.get('http://localhost:8080/api/player')
    .then(res => {
      console.log(res);
    });
}

Первое axios() работает, второе-нет. Я не вижу причины, в чем разница… Мое приложение для весенней загрузки даже не получает запрос GET, иначе оно зарегистрировало бы его.

Комментарии:

1. Можете ли вы проверить URL-адрес в браузере? Это работает?

2. Какую ошибку вы видите в консоли браузера или на вкладке «Сеть»? Я предполагаю, что либо А) Первый использует CORS для разрешения всех источников, а второй-нет, и вы выполняете перекрестный вызов (см.: SOP ), либо Б) Есть ошибка, о которой вы не упомянули.

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

4. как упоминал выше @T. J. Краудер, это должно быть для политики CORS, или если вы получите ошибку 404, это означает, что, возможно, вы указали не на то место в своем локальном хосте

Ответ №1:

Используйте эту настройку cors для вашего @контроллера

 @CrossOrigin(allowedHeaders = "*", origins = "http://localhost:4200")
@GetMapping(value = "/api/player")
public ResponseEntity<?> myMethod(...) {
    //do things
    ...
}

и добавьте cors в свой запрос заголовка:

     axios.get('http://localhost:8080/api/player',{
        headers: {"Access-Control-Allow-Origin": "*"}
    }).then(res => {
        console.log(res);
    });

или отключите cors в конфигурации безопасности spring:

 http.cors().and().csrf().disable().headers().and().authorizeRequests().antMatchers("/api/player").permitAll()
            .anyRequest().authenticated();
Метки: ,