Request failed with status code 403

Questions and Answers
1
System Information
  • Strapi Version: “0.1.0”
  • Operating System: Windows
  • Database:
  • Node Version: v20.12.2
  • NPM Version: 10.5.0
  • Yarn Version:

I am using the api key for get request and same is used for post request but post request fails and returns error code 403.

This is me GlobalApi.jsx file:
const { default: axios } = require(“axios”);

const API_KEY = process.env.NEXT_PUBLIC_STRAPI_API_KEY;
const axiosClient = axios.create({
baseURL:‘http://localhost:1337/api’,
headers:{
‘Authorization’:Bearer ${API_KEY}
}
})

const getCategory=()=>axiosClient.get(‘/categories?populate=‘)
const getDoctor=()=>axiosClient.get(’/doctors?populate=’)
const getDoctorByCategory=(category)=>axiosClient.get(‘/doctors?filters[category][Name][$in]=’+category+‘&populate=‘)
const getDoctorById=(id)=>axiosClient.get(’/doctors/'+id+"?populate=")
const bookAppointment=(data)=>axiosClient.post(’/appointments’,data)

export default{
getCategory,
getDoctor,
getDoctorByCategory,
getDoctorById,
bookAppointment
}

I am using this function for making post request:

const {user} = useKindeBrowserClient();
const saveBooking=()=>{
const data = {
data:{
Username:user?.given_name+" "+user?.family_name,
Email: user?.email,
Date : date,
Time : selectedTimeSlot,
Note: note,
doctor : doctor?.id
}
}
GlobalApi.bookAppointment(data).then(resp=>{
console.log(resp);
if(resp){
toast(“Booking Confirmation sent on Email”)
}
})
}
Post request must be sent after clicking the button-
<Button type=“button” disabled={!(date&&selectedTimeSlot)} className=“bg-teal-600 text-white” onClick={()=>saveBooking()}>
Submit

I am using Next.js with strapi and kinde authentication service.

This is the error showing up in the console:

1:1 Uncaught (in promise)

  1. AxiosError {message: ‘Request failed with status code 403’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …}

  2. code: “ERR_BAD_REQUEST”

  3. config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}

  4. message: “Request failed with status code 403”

  5. name: “AxiosError”

  6. request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

  7. response: {data: {…}, status: 403, statusText: ‘Forbidden’, headers: AxiosHeaders, config: {…}, …}

  8. stack: “AxiosError: Request failed with status code 403\n at settle (webpack-internal:///(app-pages-browser)/./node_modules/axios/dist/browser/axios.cjs:1952:12)\n at XMLHttpRequest.onloadend (webpack-internal:///(app-pages-browser)/./node_modules/axios/dist/browser/axios.cjs:2260:7)\n at Axios.request (webpack-internal:///(app-pages-browser)/./node_modules/axios/dist/browser/axios.cjs:2781:41)”

  9. [[Prototype]]: Error

Please help me resolve this.

2

Can anyone please help me??