Axios 请求 returns 404 即使 URL 有效且 API 功能正常

Question

我一直致力于制作一个简单的网站来处理 MySQL 图书数据库的信息。

Intro/Problem:

我已经得到了服务器（spring-boot）、数据库（MySQL）和网站（React）运行ning，因为它们是唯一的例外一个特定的 GET 请求，即使它似乎没有任何问题。

当我使用 Axios 从 GetFiveBooks 网站向服务器发出 GET 请求时出现此问题。一旦被调用，就会出现 404 错误 returned.

想法：

现在明显的问题是 URL 有问题，但似乎根本不是这样。我在浏览器中和使用 PostMan 多次调用完全相同的 URL 并且每次都 return 预期结果。接下来的事情是 Axios 可能有问题，但我也不认为这是一个问题，因为我可以运行另一个具有不同 URL 的 Axios 请求并且那个工作完美。

因此，如果 URL 是好的并且 Axios 是运行ning 的预期那么可能是什么错误？

我在下面包含了我认为相关的所有代码。

代码：

Axios 请求

第一种方法是我之前提到的按预期工作的请求，第二种方法给我带来了麻烦。 URL 是从名为“Commands.js”的单独文件中提取的请注意，唯一的区别是方法的名称和它们调用的确切命令。

 const getExactBook = async () => {
    try{
      const response = await axios.get(commands.getSpecificBook(10));
      console.log(response)
    } catch(error) {
  
    }
  }

  const getLastFive = async () => {
    try{
      const response = await axios.get(commands.getFiveBooks);
      console.log(response)
    } catch(error) {
  
    }
  }

Commands.js class

撇开尴尬的名称不谈，这个文件似乎确实在做它应该做的工作，URLs 的构造方式几乎相同，但减去了“getSpecificBook”方法所需的一些额外格式。具有讽刺意味的是，这使得有问题的 URL 比实际工作的更简单。

const baseURL="http://localhost:8080/api";

class commands {

  getSpecificBook = (id) => {
    return baseURL+`/books/${id}`;
  }

  getFiveBooks = () => {
    return baseURL+`/books`;
  }
}

export default new commands();

Spring-引导 REST 控制器

这是控制器中两个最相关的映射 class。当通过网络浏览器或 Post Man 手动调用时，它们都可以工作，但只有“getSpecificBook”在被网站调用时才工作。抱歉，如果这段代码草率，这是整个过程中我理解最少的部分。

@CrossOrigin(origins="http://localhost:8080")
    @GetMapping(path="/books")
    public @ResponseBody Iterable<Book> getFiveBooks() {
      // This returns a JSON or XML with the users
      return bookRepository.findLastFive();
    }
    
    @CrossOrigin(origins="http://localhost:8080")
    @GetMapping(path="/books/{id}")
    public @ResponseBody List<Book> getSpecificBook(@PathVariable int id) {
        return bookRepository.findBybookID(id);
    }

图书资料库

这是减去导入代码后的完整 BookRepository 接口。底部的自定义 SQL 查询确实按预期工作。 GenreID =8 仅指美国历史。

public interface BookRepository extends CrudRepository<Book, Integer>{
    List<Book> findAll();
    
    List<Book> findBybookID(int bookID);
    
    @Query(nativeQuery=true, value= "Select * from library.Book b where genreID = 8 order by b.bookID Desc Limit 0,5")
    List<Book> findLastFive();
    
}

这四张图片显示了 Post Man 和 Firefox 中两个请求的结果。

最后一张图片显示了在网站中发出请求时的控制台结果。第一个结果针对前面显示的“getExactBook”方法，最后一个结果针对“getLastFive”。

请注意，“favicon.ico”的 404 并不重要，我根本没有抽出时间为网站设置合适的图标。它永远不会对整个网站产生任何影响。

如果我遗漏了一些明显的东西，我深表歉意。我对此还是很陌生，不知道要寻找什么。

Answer 1

我注意到您没有从 commands class 调用函数 getFiveBooks()。这可能是复制中的错误，但值得研究，因为您需要调用该函数才能获得 url.

我注意到的另一个问题是，您实际上并没有在执行 axios 请求的函数中记录任何错误。附加 console.error 有助于在出现实际错误时进行调试。

（我也是第一次接触 SO，希望对您有所帮助）

Axios 请求 returns 404 即使 URL 有效且 API 功能正常

Axios Request returns 404 even though URL is valid and the API functions correctly

javascript

reactjs

spring-boot

rest

axios

Intro/Problem:

想法：

代码：

Axios 请求

Commands.js class

Spring-引导 REST 控制器

图书资料库