[SOLVED] CORS ERROR in React js axios when its working in postman

CORS ERROR in React js axios when its working in postman

In my Mern Stack Project I am facing a problem when I am creating a Lesson from postman its created successfully but when I am trying from my browser its given me 500 error in network tab. But in console i got CORS error and also 500 error. I am including SS in bellow if anyone can face this kind of problem please help me. I am trying all the similiar solution from stackoverflow.

Access to XMLHttpRequest at 'https://lms-api-v1.coderslab.com.bd/api/v1/lesson/add' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

const apiClient = axios.create({
  baseURL: "https://my-link",
  withCredentials: false,
  accesscontrolalloworigin: "*",
  accesscontrolallowMethods: "GET, POST, PUT, DELETE, PATCH, OPTIONS",
});

// Create Lesson
export const createLesson = (lessonData, token) => async (dispatch) => {
  try {
    dispatch({ type: NEW_LESSON_REQUEST });

    const config = {
      headers: {
        Authorization: `Bearer ${token}`,
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Credentials':true,
        'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
      },
    };

    const { data } = await apiClient.post(`lesson/add`, lessonData, config);

    dispatch({
      type: NEW_LESSON_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: NEW_LESSON_FAIL,
      payload: error.response,
    });
  }
};

Solution

you need to allow origin from backend. like this

Access-Control-Allow-Origin: http://localhost:3000