CODEWITHSUNDEEP
vue.jsvuejs2axios
normeno
normeno

Reputation: 105

Cors error when calling endpoint from localhost with Vue

I am creating a simple application with Vue, and I call an endpoint with axios

axios.post(url, {
  email: this.email,
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

I get the error

from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The problem is not at the server level, I have done tests from Postman or directly with CURL and it does not generate an error.

Solution:

Thanks to Shrinivas Bendkhale's comments. I managed to solve the problem.

At first it did not work, so it was necessary to add the "logLevel" and "pathRewrite" options to the proxy.

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '^/rp': {
        target: process.env.API_OLD_SERVER,
        secure: false,
        logLevel: 'debug',
        pathRewrite: { 
          '^/rp': '/'
        }
      },
    },
  },
}

So my call was as follows

axios.post('/rp/full-path', {
    usermail: this.email,
  })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });

Upvotes: 1

Views: 835

Answers (1)

Srinivas Bendkhale
Srinivas Bendkhale

Reputation: 93

Inside vue.config.js file add following lines:

    // vue.config.js
    module.exports = {
    // options...
         devServer: {
            proxy: 'https://mywebsite/',
         }
    }

Upvotes: 1

Related Questions