vue cli3 enable CORS

Question

I have had this problem for nearly 2 days, any help would be a life saver.

I have my vue app running on 8080 dev mode and I am trying to integrate blockstack login and that app tries to read http://localhost/manifest.json, so I placed it in static directory, but it is throwing me cors error, do we have solution for that vue cli configurations like vue.config.js?

Unconformable

CORS issues need to be resolved as part of your server configuration. Which port is your server running on on Localhost? Or are you literally trying to access a local file? – Ramulose

Answer 1

The "correct answer" doesn't actually help in this instance.

Blockstack needs to be able to hit the manifest.json file (in this case localhost:8080/manifest.json). When the server doesn't support CORS Blockstack will throw an error.

What the OP is asking is how to make "vue-cli-service serve" allow COR requests to happen. To do this, we need to modify Webpack's dev server to allow the CORS request.

Add vue.config.js (if it doesn't already exist)

module.exports = {
  configureWebpack: {
    devServer: {
      headers: { "Access-Control-Allow-Origin": "*" }
    }
  }
};

Footlocker

That was interesting, what i didn't realize was that not only the server serving the page the request is coming from has to allow CORS, but also the server the request is going to... That cost me a minute to figure out ;p – Podite

This works. Someone give this beautiful man a beer. – Audet

Answer 2

I had the same problem like you are having. I applied what the documentation of vue-js says to put some code in vue.config.js like this

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

but that would'nt help. See this documentation https://cli.vuejs.org/config/#devserver . I have separate backend which is in laravel,What i did after having wasting too much time in allowing cors in vue-js, i applied cors on my backend index.php file and that worked like a charm. The problem is you don't really know where is it coming from but look at both front end and backend side and then try to find solution on both sides.

Tishatishri

The tip to see backend cors configuration was the key to resolve my problem... Great answer !!! – Mosenthal