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&其中_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]);

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

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;