Quickly Fix CORS issues in Vue- Express app

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.

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

touch vue.config.js

`

1. add the following to your the file
   `
   

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

   
   `

2. navigate to your backend base directory and run the following command
   `
   

   npm i cors --save
   

   
   ` this make it easier to handle cors

3. 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

`
😊 And that does it.

Reference and more reading

Cross-Origin Resource Sharing

follow me

twitter

Github