当我使用 createAsyncThunk 和 axios 时，我不断收到 400 错误

Question

Hi everyone i dont know if anyone can help on this but when using createAsyncThunk and Axios whenever i try to POST something I get a 400 error. And I know that means it is a bad request but I dont know why I am getting it. And here my code

const API_URL =
  'https://us-central1-bookstore-api-e63c8.cloudfunctions.net/bookstoreApi/apps/sppWoQdq6XBTog313fKt/books';

export const defaultState = [];

export const getBooks = createAsyncThunk(GET_BOOKS, async () => {
  const response = await axios.get(API_URL);
  return response.data;
});

export const addBook = createAsyncThunk(ADD_BOOK, async (book) => {
  const response = await axios.post(API_URL, book);
  return response.data;
});

export const removeBook = createAsyncThunk(REMOVE_BOOK, async (book) => {
  const response = await axios.delete(`${API_URL}${book.id}`);
  return response.data;
});

export const bookSlice = createSlice({
  name: 'books',
  initialState: defaultState,
  extraReducers: (builders) => {
    builders.addCase(getBooks.fulfilled, (action) => action.payload);
  },
});

export default bookSlice.reducer;

I have tried everything i can to understand why I am getting this error differant api's differant code i dont know what the problem is

Answer 1

You can try to force json header:

axios.post(API_URL, book, {headers: {'Content-Type': 'application/json'}})