React 应用程序不适用于 Firebase 托管

Question

我的 react 应用程序在本地运行良好......但在部署到 firebase 托管后就不行了。

Chrome 的检查器的网络选项卡显示 https://another-netflix-clone.web.app/ 被添加到每个 api 调用...https://another-netflix-clone.web.app/api.themoviedb.org/3/discover/movie?api_key=key&with_genres=27

这是个问题。不知道为什么会这样。

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

主机设置：

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
chaselwander@W-MD-ML-CHASEL chad_neflix_clone (master)*$ npm run build

> chad_neflix_clone@0.1.0 build /Users/chaselwander/projects/react_netflix_clone/chad_neflix_clone
> react-scripts build

Creating an optimized production build...
Compiled successfully.

应用程序：

https://another-netflix-clone.web.app/

API调用代码片段：

/* example fetchUrl value: https://image.tmdb.org/t/p/original/trending/all/week?api_key=${APIKEY}&language=en-US */

function Row({ title, fetchUrl, isLargeRow }) {
  const [movies, setMovies] = useState([]);
  const [trailerUrl, setTrailerUrl] = useState("");

  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchUrl]);

我在本地使用 build 文件夹运行了应用程序......它工作得很好。

serve -s build

更新了问题描述：

我真的只需要帮助弄清楚为什么这个 firebase 会生成应用程序 url：

https://another-netflix-clone.web.app/

在每个 api 调用之前添加：

Request URL: https://another-netflix-clone.web.app/api.themoviedb.org/3/discover/tv?api_key=2ce4f6136730519d5877eb7a94b4e21e&with_networks=213

当我运行时在本地：

serve -s build

api调用正确，返回数据：

https://api.themoviedb.org/3/discover/tv?api_key=2ce4f6136730519d5877eb7a94b4e21e&with_networks=213

Answer 1

在当前版本中，当前的错误在这里：

 console.log(movies);
  // install Quokka to print results to editor
  return (
    <div className="row">
      <h2>{title}</h2>
      <div className="row__posters">
        {movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row__posterLarge"}`}
            src={`${base_url}${
              isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}
    </div>
  );

尝试将其重写为：

 console.log(movies);
  // install Quokka to print results to editor
  return (
    <div className="row">
      <h2>{title}</h2>
      <div className="row__posters">
        {movies && movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row__posterLarge"}`}
            src={`${base_url}${
              isLargeRow ? movie.poster_path : movie.backdrop_path
            }`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}
    </div>
  );

是的，这与 Firebase 托管无关。

还将您的 axios.js 文件更新为：

import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.themoviedb.org/3",
  headers: {
    "Content-Type": "application/json;charset=UTF-8",
  },
});

export default instance;