Quickly Fix CORS issues in Vue- Express app

#vue #cors #express

Cross-Origin Resource Sharing (CORS)as defined on MDN web docs, is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources

CORS issues almost often makes scaffolding your first full stack application heart breaking😬

So I put together a Lil nice work around earned from expreience. I hope it helps in dealing with CORS issues in your next Vue and Express Js App.

_The following procedure assumes a moderate level of experience in building applications with Vue.js and installing nmppackage 📦

To start with.

Create a new file the the base directory of your Vue project

touch vue.config.js

add the following to your the file

module.exports = {
  devServer: {
        proxy: 'http://api.back.end',
    }
}

navigate to your backend base directory and run the following command

npm i cors --save

this make it easier to handle cors

The following lime assumes your Express instance is named app if not change app to

const app = require("express")
//...
//the rest of your import here
//...
const cors = require cors()
app.use(cors());
//... continuation of your application