I am using RTK Queries for Front-end Api Integration and Express js for Backend but while I am hitting a get api to fetch blogs post it will run fine from backend side it will return expected results from backend side but in front end it returns cors error and returns nothing in the response of the api like this one=>
image 1 displaying the error on the network tab while hitting the get api of the fetch blogs
or if I am talking about the response of the api it gives nothing in it but giving 200 status code in the api headers tab like this one=>
enter image description here
enter image description here
but when I am hitting the api from postman the api return the expected result as I want like this one
enter image description here
when I debugg the error on front end then I found that in the apiSliceInterceptor when I am hitting the baseQuery of the redux toolkit for fetching the base query of the api it returns the error just like { status: ‘FETCH_ERROR’, error: ‘TypeError: fetch failed’ }
enter image description here
I can’t understand what’s the error and because of what mistake it is occuring I Unable to solve this error so can you please let me know the solution of it and the reason of the error so it will heipful in understanding for me
I am attaching the apiSliceInterceptor.js file code in which the error is occuring and the configuration of the rtk query is done and I am also attaching the index.js file of the server where I initialize the core on backend if there is any mistake please let me know this is very helpful for me
apiSliceInterceptor file code
import {fetchBaseQuery, retry } from "@reduxjs/toolkit/query/react";
const apiSliceInterceptor ={};
apiSliceInterceptor.baseQuery = fetchBaseQuery({
baseUrl: "http://localhost:3001",
});
apiSliceInterceptor.baseQueryWithRetry = retry(
apiSliceInterceptor.baseQueryWithInterceptor,{
maxRetries:3,
}
)
apiSliceInterceptor.baseQueryWithInterceptor = async (
args,
api,
extraOptions
) => {
try {
const result = await apiSliceInterceptor.baseQuery(args,api,extraOptions);
if(result.error){
if(result.error?.data?.message){
console.log(result.error.data.message)
}
}
return result;
} catch (error) {
console.log("error Occur ==========> ", error);
}
}
export {apiSliceInterceptor}
index.js file of the server where cors is initialized
const express = require('express')
const cors= require('cors')
const bodyParser= require('body-parser')
const apiRoutes= require('./apis')
const dotenv = require('dotenv')
dotenv.config()
const app = express()
const port = process.env.APP_PORT
app.use(express.json())
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(apiRoutes)
app.use(cors())
app.get('/', (req, res) => {
res.send(' web server is running!')
})
app.listen(port, () => {
console.log(`Example app listening on port http://localhost:${port}`)
})
I am Expecting to resolve this error and why this error is ocurring I am unable to find it
Rahul Jat is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.