发出此请求时出现混合内容错误即使它是 https

问题描述

我正在通过使用 reactjs 构建一个小型电影搜索应用来练习 fetch-api。

它在 localhost 上运行良好，但是当我在 netlify 上部署它时出现此错误。

混合内容：“https://movie-search-abhi28069.herokuapp.com/”页面已通过 HTTPS 加载，但请求了不安全的资源“http://api.themoviedb.org/3/search/”电影？api_key=####&query=prime'。此请求已被阻止；内容必须通过 HTTPS 提供。

fetch(
        "https://api.themoviedb.org/3/search/movie/?api_key=####&query=" +
          term
      )
        .then((res) => res.json())
        .then((data) => setMovies(data.results))
        .catch((err) => console.log(err));

在加载组件以获取热门电影时，我有另一个 fetch 调用，它工作正常。不知道为什么我的搜索请求会自动转换为 http。

解决方法

根据https://www.themoviedb.org/talk/5dd34e7957d3780015dcfd99
使用尾随空格，您的请求将被重定向到 http.
去掉尾随空格即可解决问题。

fetch(
    "https://api.themoviedb.org/3/search/movie?api_key=####&query=" +
      term
  )
    .then((res) => res.json())
    .then((data) => setMovies(data.results))
    .catch((err) => console.log(err));