api working in react

fastapi/main.py

 from fastapi import FastAPI, Depends
 from fastapi import FastAPI, Depends
+from fastapi.middleware.cors import CORSMiddleware
 from datetime import date
 from datetime import date
 from typing import List
 from typing import List
 from sqlalchemy.orm import Session
 from sqlalchemy.orm import Session
@@ -10,6 +11,20 @@ from book.schemas import Book  # Import Book schema
 
 
 app = FastAPI()
 app = FastAPI()
 
 
+# Allow CORS
+origins = [
+    "http://localhost:3000",
+    # Add other origins as needed
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,  # Allow specific origins
+    allow_credentials=True,
+    allow_methods=["*"],  # Allow all methods (GET, POST, PUT, DELETE, etc.)
+    allow_headers=["*"],  # Allow all headers
+)
+
 # User CRUD Operations
 # User CRUD Operations
 @app.post("/user/", response_model=user_schemas.User)
 @app.post("/user/", response_model=user_schemas.User)
 def create_user(user: user_schemas.UserCreate, db: Session = Depends(get_db)):
 def create_user(user: user_schemas.UserCreate, db: Session = Depends(get_db)):

react/src/api.js

+import config from './config';
+
+const apiBaseUrl = config.apiBaseUrl;
+
+export const fetchAvailableBooks = async () => {
+  try {
+    const response = await fetch(`${apiBaseUrl}/book/available`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching available books:', error);
+    throw error;
+  }
+};

react/src/app/available/page.js

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useState, useEffect } from 'react';
 import BookList from '../../components/booklist';
 import BookList from '../../components/booklist';
 import config from '../../config';
 import config from '../../config';
+import { fetchAvailableBooks } from '../../api';
 
 
 export default function Page() {
 export default function Page() {
   const [books, setBooks] = useState([]);
   const [books, setBooks] = useState([]);
@@ -13,13 +14,7 @@ export default function Page() {
     const fetchBooks = async () => {
     const fetchBooks = async () => {
       try {
       try {
         setLoading(true);
         setLoading(true);
-        const response = await fetch(`${config.apiBaseUrl}/books/available`);
-        
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        
-        const data = await response.json();
+        const data = await fetchAvailableBooks();
         setBooks(data);
         setBooks(data);
       } catch (err) {
       } catch (err) {
         setError(err.message);
         setError(err.message);