Cors error when calling endpoint from localhost with Vue

Question

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.

logLevel: It allows to see in the terminal how the proxy is working
pathRewrite: Add the rest of the path 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);
    });

use chrome.google.com/webstore/detail/allow-cors-access-control/… — Khurshid Ansari
– Khurshid Ansari, Commented Aug 30, 2020 at 4:59
Thanks @KhurshidAnsari , but I'm trying to find a more general solution, this would only work for Chrome, and for those who have the plugin installed — normeno
– normeno, Commented Aug 30, 2020 at 14:10

Srinivas Bendkhale · Accepted Answer · 2020-08-30 05:35:31Z

1

Inside vue.config.js file add following lines:

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

answered Aug 30, 2020 at 5:35

Srinivas Bendkhale

931 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

normeno Over a year ago

Thanks, It was not the concrete solution, but it helped me a lot to solve it. I used what you indicate me, and added the pathRewrite to it

Collectives™ on Stack Overflow

Cors error when calling endpoint from localhost with Vue

Solution:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related