GET http://localhost:3000/search 404（未找到）REACT.JS、Node.js 和 Axios答案

【问题标题】：GET http://localhost:3000/search 404 (Not Found)REACT.JS, Node.js and AxiosGET http://localhost:3000/search 404（未找到）REACT.JS、Node.js 和 Axios
【发布时间】：2022-07-12 04:39:24
【问题描述】：

有人可以帮帮我吗？我正在尝试构建一个 youtube 克隆网站，但出现此错误：

GET http://localhost:3000/search 404（未找到）未捕获（承诺中）错误：请求失败，状态码为 404 在 createError (createError.js:16:1) 定居时 (settle.js:17:1) 在 XMLHttpRequest.onloadend (xhr.js:66:1)

App.js：

import React from "react";
import axios from "axios";
import { Grid } from "@material-ui/core";
import { SearchBar, VideoDetail } from "./components";

import youtube from "./api/youtube";

class App extends React.Component {
  state = {
    video: [],
    selectedVideo: null,
  };
  handleSubmit = async (searchTerm) => {
    const response = await axios.get(""http://localhost:3000/search", youtube, {
      params: {
        part: "snippet",
        maxResults: 5,
        q: searchTerm,
      },
    });

    this.setState = {
      videos: response.data.items,
      selectedVideo: response.data.items[0],
    };
  };
  render() {
    const { selectedVideo } = this.state;
    return (
      <Grid justifyContent="center" container spacing={10}>
        <Grid item xs={12}>
          <Grid container spacing={10}>
            <Grid item xs={12}>
              <SearchBar onFormSubmit={this.handleSubmit} />
            </Grid>
            <Grid item xs={8}>
              <VideoDetail video={selectedVideo} />
            </Grid>
            <Grid item xs={4}>
              {/*VIDEO DETAILS */}
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    );
  }
}

export default App;

searchBar.js：

import React from "react";

import { Paper, TextField } from "@material-ui/core";

class SearchBar extends React.Component {
  state = {
    searchTerm: "",
  };

  handleChange = (event) => {
    this.setState({ searchTerm: event.target.value });

    this.handleSubmit = (event) => {
      const { searchTerm } = this.state;
      const { onFormSubmit } = this.props;

      onFormSubmit(searchTerm);

      event.preventDefault();
    };
  };
  render() {
    return (
      <Paper elevation={6} style={{ padding: "25px" }}>
        <form onSubmit={this.handleSubmit}>
          <TextField
            fullWidth
            label="Search..."
            onChange={this.handleChange}
          ></TextField>
        </form>
      </Paper>
    );
  }
}

export default SearchBar;

youtube.js：

import axios from "axios";
const key = "MY_API_KEY";
export default axios.create({
  baseURL: "https://googleapis.com/youtube/v3",
});

谁能告诉我这里出了什么问题？

【问题讨论】：

/search 路由在服务器上的代码在哪里？
googleapis.com/youtube/v3
你的回答不合逻辑。我询问了您编写的代码，以便在 localhost:3030 上运行的后端为路由 /search 提供服务，您回复了一个 YouTube URL...？
也许您打算使用youtube.get('/search', ...) 而不是axios.get('http://localhost:3030/search', youtube, ...)？（如果是这种情况，那么下一个问题就是您没有将 API 密钥作为标头传递。）

标签： javascript node.js reactjs axios

【解决方案1】：

你在这里打错了

    const response = await axios.get(""http://localhost:3000/search", youtube, {

链接应该在双引号内。删除第一个双引号，然后重试。

【讨论】：

感谢您检查我的代码。我删除了第一个代码，但得到相同。还能是什么。 googleapis.com/youtube/v3 是否仍然有效？

【解决方案2】：

这可能对某人有所帮助：检查两端的 url（如果它们匹配，则前端和后端） 对我来说只是一个 _ 导致了我这个错误：
在 express 中有 "/add_place"，反应中的调用是 "/addplace"

【讨论】：