What Is Cors?

CORS stands for Cross-Origin Resource Sharing. It is an HTTP protocol that allows web applications to access resources hosted on different domains. CORS allows a server to indicate any origins other than its own from which a browser should permit loading resources. It is a mechanism for relaxing the same-origin policy of modern internet browsers. CORS allows resources such as JavaScript and web fonts to be loaded from domains other than the origin parent domain. However, it also provides potential for cross-domain attacks if a website's CORS policy is poorly configured and implemented.

Why do I need this Info?

Whether you're a Front-end Developer or Back-end Developer or maybe even Full-stack, you'll have to deal with CORS in some way, when consuming or creating APIs. CORS allows for the secure transmission of information on the web across two endpoints the issue with this is as web developers we might want to access resources from servers(If you're a frontend dev) which may not have the header Access-Control-Allow-Origin header.

This may present a problem because there's no permission allowing for a third party to access the given resource, for different Js frameworks, there'll be multiple solutions but I want to dwell on VUE js for today.

In Vue this problem is encountered multiple times when trying to fetch a resource while there might be some solution of altering the code on the backend we can also fix it from the frontend as well without having to do anything on the backend, want to know how to do that keep scrolling.

There are two ways to approach the solution:

1. A solution that only works on localhost but would take some more server-side code to work in production.

2. A solution that works on production and localhost

Using devProxy in vue. config.js file

If you're using vue-cli 3, in your root folder there's a Vue. config.js file, if you can't find it then create one and add the following code:

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

The proxy should contain the baseUrl of the resource or server you're trying to access and in any place that a request is made with the baseUrl and a route, replace the baseUrl with the localhost, e.g, localhost:4000/api/v1

Note: This only works for localhost shipping this to production will require more changes in your backend code which I'm not going to discuss today but leave your thoughts in the comments section if you want me to discuss shipping to production

For more information on the vue.config.js check out https://cli.vuejs.org/

Adding a preset header config to your Axios plugin

If you're using Axios then you can set a default header using the line of code below:

axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";

What this does is allow all requests from different origins while it doesn't make sense to add this to the front-end code, it might just be what is missing after the server is configured as:

header("Access-Control-Allow-Origin: *")

So try it out whichever one works and don't forget to leave a like, share if the resource was helpful and leave in the comment sections your thoughts towards CORS

Thanks for Reading!!!