configure nodejs rest api server and vue project with axios cors policy error

Question

as the title sais, i'm trying to configure a local rest api server running node js and in the meantime i have a vue project with axios. i surfed the whole internet, tried every server/client configuration, server headers settings, cors package, axios header config, but i still have cors policy error inthe console. postman works by calling localhost:3000/everyapiPOSTorGet, but axios from the browser dont. could everyone indicate some working fix?

here is my actual node configuration:

const express = require("express");
const PORT = process.env.port || 3000;
const apiRouter = require('./routes');
const app = express();

app.use(express.json())
app.use('/', apiRouter)

// CORS middleware

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
        "Access-Control-Allow-Headers",
        "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
    );
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
    next();
})

app.listen(PORT, () => {
    console.log("Server is listening on port: ", PORT);
});

thank you!

edit: i forgot to say that obviously vue project goes on localhost:8080 or 8081 (depends if i have more project running) and the server on localhost:3000

If you use vue-cli you can avoid the CORS issues by setting up proxy. In your example, you could use this devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, } } },. This means that if you call localhost:8080/api call will be proxied to your backend on localhost:3000/api — ljubadr
thank you ljubadr it works!, i didn't know about vue cli proxy — peppeg85

ljubadr ljubadr · Accepted Answer · 2020-11-17T17:05:14

Even though your question is how to configure and fix CORS errors, locally we can actually skip CORS altogether by using the webpack devServer proxy setting

With vue-cli you need to update vue.config.js file in your project root. If you don't have this file, create it

module.exports = {
  "devServer": {
    "port": 8080,
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true
      }
    }
  }
}

where 8080 is your frontend port (vue) and 3000 is your backend port (nodejs)

After this update make sure to restart your vue-cli npm run serve to see the proxy effect

What this setting does is that if you call http://localhost:8080/api/..., call will be proxied to your backend on http://localhost:3000/api/... and CORS issues should be gone

configure nodejs rest api server and vue project with axios cors policy error

1 Answers