后端 GET 请求失败，Axios/React

Question

我正在构建我的第一个重型前端应用程序，并且我正在使用我自己的应用程序构建搜索功能。

目前，我只想使用 api 端点获取数据，该端点在运行时通过邮递员/我自己的浏览器等工作，但是我的 get axios 请求出错。

见下文：

我有以下两个变量。例如，它是一个用户查询，由“查询”的输入驱动。如图所示，所需的端点是：http://localhost:5000/api/role/title?title=Programmer。

如果我通过帖子和浏览器发出直接请求，我也会使用我制作的自定义挂钩 Debouncer，我认为这是不言自明的。

    const [searchQuery, setSearchQuery] = useState("");
    const [isLoading, setLoading] = useState(false);


  const prepareSearchQuery = (query) => {
        const url = `http://localhost:5000/api/role/title?title=${query}`;

        //replaces bad query in the url
        return encodeURI(url);
    }

    const searchRolePosition = async () => {
        if(!searchQuery || searchQuery.trim() === "")
            return;

        setLoading(true);

        const URL = prepareSearchQuery(searchQuery);

        const response = await axios.get(URL).catch((err) => {
            console.log(err);
        });

        if(response) {
            console.log("Response", response.data);


   useDebounce(searchQuery, 500, searchRolePosition)
        

当我启动应用程序时，它不会出错，但是一旦我键入字符串“Programmer”，以到达该端点，我会得到以下 console.log。

Access to XMLHttpRequest at 'http://localhost:5000/api/role/title?title=Programmer' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

从源“http://localhost:3000”访问“http://localhost:5000/api/role/title?title=Programmer”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制-请求的资源上存在 Allow-Origin' 标头。

VM2546:1 GET http://localhost:5000/api/role/title?title=Programmer net::ERR_FAILED 200

我的组件目前是：

 <SearchInput placeholder = "Search for Roles" 
                                onFocus={expandedContainer} 
                                ref={inputRef}
                                value={searchQuery}
                                onChange={changeHandler}
                                />

它仍然将我的值记录为 Programmer，表明它确实在工作，但是它无法获取任何数据，因为它失败了。

对于那些感兴趣的人，API 看起来像这样。如前所述，它确实适用于 Postman 和浏览器：

router.get("/title", async (req,res) => {
  const qNew = req.query.new;
  const qTitle = req.query.title;

  try{
    let roles; 
    if(qNew){
      roles = await Role.find().sort({createdAt: -1}).limit(1)
    } else if (qTitle){
      roles = await Role.find({title: {
        $in: [qTitle],
      },
    });
    }else {
      roles = await Role.find();
    }
    res.status(200).json(roles)
  }catch(err){
    res.status(500).json(err);
  }

} )

Answer 1

在 HTTP 标头中使用它：

Access-Control-Allow-Origin: http://localhost:3000