DEV Community

loading...
Cover image for How to fix the CORS issue in Vuejs

How to fix the CORS issue in Vuejs

Alireza Hamid
I'm Front-end developer(Vuejs | Nuxtjs) CSS lover.
Updated on ・2 min read

Imagine the first day in which you want to connect and implement API(s) from the back-end into your front-end project. Suddenly when you call those API(s) something going wrong, and you likely see this error in your console.

Access to XMLHttpRequest at ‘http://api.back.end/data' from origin ‘http://localhost:8080/' has been blocked by CORS policy.
Enter fullscreen mode Exit fullscreen mode

Boom, everything breaks down. This is a nightmare for developers. But how we can deal with this? Before to solve the problem we should deep dive into this error.

Why do we get CORS error? What really is CORS?

This is a common policy on the web we call it same-origin, which means web applications should interact with other services from the same origin. But sometimes it is required to send a request to another service-- server, back-end, API, and etc. CORS makes it possible to set a specific header on the request to the server. you can read widely about Cross-Origin Resource Sharing (CORS).

In my case, I was serving my Vuejs project on localhost and the API service was running on the server. As you can guess they're were from different origins completely against the same-origin policy as I mentioned. We assume you haven't any access to change the Back-end configuration.

so, How we can deal with CORS error?

Yes, we should have same-origin, But how? Hopefully we can achieve this easily with Vue CLI. In my case, the Front-end project was running on localhost:8080. We actually need to proxy the API requests to the Back-end during development.

To config this setting, you should put the proxy URL into this file vue.config.js if you haven't this file yet in your project, first, you need to create the file right beside the package.json in the root of the project.

// vue.config.js
module.exports = {
  // options...
}
Enter fullscreen mode Exit fullscreen mode

Inside module.exports you can put your configuration using devServer object. Because we want to config our development server to proxy API requests to the Back-end Endpoint.

// vue.config.js
module.exports = {
  devServer: {
        proxy: 'http://api.back.end',
    }
}
Enter fullscreen mode Exit fullscreen mode

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://api.back.end.

Now you need to terminate your app and run it again so that new configurations will be applied to the server. Just that, easy peasy lemon squeezy :))

You can find other configurations here Vue configurations.

If you want to get rid of this issue temporarily just install this chrome extension CORS Unblock.

Discussion (4)

Collapse
pajri profile image
Pajri

i'm implmenting micro frontend and i need to fetch some data from other micro frontend but then i got cors error. to solve this i use this code in the source micro frontend :

headers: {
    "Access-Control-Allow-Origin": "*",
 }
Enter fullscreen mode Exit fullscreen mode

maybe someone has the same issue with me.

Collapse
murtdha profile image
Murtdha Dakhil

what about in production mode

Collapse
elevado profile image
érdnA

Use a .htaccess (Apache) or nginx.conf (Nginx) an set the header.

Collapse
pajri profile image
Pajri

right. prod mod suppose to be configured in server side.