我一直致力于制作一個簡單的網站來處理 MySQL 圖書資料庫的資訊。

簡介/問題：

我已經讓服務器（spring-boot）、資料庫（MySQL）和網站（React）按照預期運行，除了一個特定的 GET 請求，即使它似乎沒有任何問題一點也不。

當我使用 Axios 從GetFiveBooks網站向服務器發出 GET 請求時，就會出現此問題。一旦呼叫它，就會回傳 404 錯誤。

想法：

現在明顯的問題是 URL 有問題，但似乎根本不是這樣。我已經從瀏覽器和 PostMan 中多次呼叫完全相同的 URL，并且每次都回傳預期的結果。接下來是 Axios 可能有問題，但我也不認為這是一個問題，因為我可以使用不同的 URL 運行另一個 Axios 請求，并且該請求運行良好。

因此，如果 URL 是正確的并且 Axios 正在按預期運行，那么可能出了什么問題？

我在下面包含了我認為相關的所有代碼。

代碼：

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 類

撇開尷尬的名字不談，這個檔案似乎確實在做它應該做的作業，并且 URL 的構造方式幾乎相同，只是減去了“getSpecificBook”方法所需的一些額外格式。具有諷刺意味的是，這使得有問題的 URL 比實際作業的 URL 更簡單。

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

class commands {

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

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

export default new commands();

Spring-Boot REST 控制器

這是控制器類中最相關的兩個映射。當通過網路瀏覽器或 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();
    
}