通过 HTTP 而不是 HTTPs 服务的 API 调用导致 React/Axios 出错

Question

我正在使用 API 在我的 React 应用程序中使用 axios 获取电影数据。 虽然这在 localhost 中有效，但我最近将它上传到 github 页面，它不再有效并导致此错误。

“混合内容：通过 HTTPS 加载所有资源，以提高您网站的安全性”

我的代码如下所示：

const fetchItems = async () => {
      const result = await axios(
        `http://www.omdbapi.com/?s=${searchTitle}&type=movie&page=${searchPage}&y=${searchYear}&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 页面站点中没有打印任何内容，并且我收到了上面详述的错误。 我以前从未真正遇到过这个错误，我期待得到一些反馈

Answer 1

你必须写https而不是http

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

Answer 2

您需要在端点链接中使用 https

const fetchItems = async () => {
      const result = await axios(
        `https://www.omdbapi.com/?s=${searchTitle}&type=movie&page=${searchPage}&y=${searchYear}&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);
    };