Вызовы API, выполняемые по протоколу HTTP вместо HTTPs, приводят к ошибке в React/Axios

#javascript #reactjs #promise #axios

Вопрос:

Я использую API для извлечения данных о фильмах с помощью axios в своем приложении React. Хотя это работает в localhost, я недавно загрузил это на страницы github, где оно больше не работает, и это приводит к этой ошибке.

«Смешанный контент: загружайте все ресурсы по протоколу HTTPS для повышения безопасности вашего сайта»

Мой код показан ниже:

 const fetchItems = async () => {
      const result = await axios(
        `http://www.omdbapi.com/?s=${searchTitle}amp;type=movieamp;page=${searchPage}amp;y=${searchYear}amp;apikey=myapikeyhere`
      );
      if (result.data.totalResults) {
        console.log("fetching data:", result.data.Search);
        setQueryLength(result.data.Search.length);
        setMovieQuery(result.data.Search);
      } else {
        setMovieQuery([]);
        setQueryLength(0);
      }
      setLoading(false);
    };

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

Ответ №1:

Вы должны писать https , а не http

 const result = await axios(
    `https://www.omdbapi.com/?s=${searchTitle}amp;type=movieamp;page=${searchPage}amp;y=${searchYear}amp;apikey=myapikeyhere`
);

Ответ №2:

Вам необходимо использовать https в вашей конечной ссылке

 const fetchItems = async () => {
      const result = await axios(
        `https://www.omdbapi.com/?s=${searchTitle}amp;type=movieamp;page=${searchPage}amp;y=${searchYear}amp;apikey=myapikeyhere`
      );
      if (result.data.totalResults) {
        console.log("fetching data:", result.data.Search);
        setQueryLength(result.data.Search.length);
        setMovieQuery(result.data.Search);
      } else {
        setMovieQuery([]);
        setQueryLength(0);
      }
      setLoading(false);
    };