DEV Community

Cover image for Quickly Fix CORS issues in Vue- Express app
ADEOYE ADEFEMI OPEOLUWA
ADEOYE ADEFEMI OPEOLUWA

Posted on

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
Enter fullscreen mode Exit fullscreen mode


`

  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
Enter fullscreen mode Exit fullscreen mode


`
😊 And that does it.

Reference and more reading

Cross-Origin Resource Sharing

follow me

twitter

Github

Discussion (0)