CORS Preflight Did Not Succeed on nuxt js/ vuejs

# PROBLEM

##Getting this error when I try to execute a method that does an API call to the backend. Case in point, the system I am building does authentication via phone number and OTP. After entering the OTP my function makes a network call to authenticate the user. At this point I get this error CORS Preflight Did Not Succeed on my dev console. What could be the problem?

# SOLUTION

There are various reasons why this type of error will pop up, check them outhere on MDN How to solve it on nuxt js/ vuejs

Assumptions

• You are making network calls using Axios

Step 1 Install Axios, refer to documentation here

Step 2 Configuring proxy on your nuxt.config.js

// add axios in your modules section
  modules: [ 
    "@nuxtjs/axios",
  ],
  // set `proxy` to `true` for axios
  axios: {
    proxy: true,
  },
  // configure your url
  proxy: {
    "/api/": {
      target: `https://jsonplaceholder.typicode.com/`,
      pathRewrite: { "^/api/": "" },
      changeOrigin: true, 
    },
  },

Step 3 Lets now use our proxy

// use it this way for an API that does not take any parameter
let postResponse = await this.$axios.get(`/api/`);
// use it this way for an API that **REQUIRES** parameters
 let postResponseUrl = `todos/1`;
 let postResponse = await this.$axios.get(`/api/${postResponseUrl}`);

This solved the problem and the app now works fine.

HAPPY CODING </😊>