Fixing CORS error for development!

CORS (cross-origin resource sharing) is used to make sure http requests are sent from reliable sources. During the development of websites or anything using http requests, it can be a nuisance, however, since it can block your requests from going through. It should be noted that this is an issue during development, and not during production, as you will (hopefully) be using https when running on production.

In this article, I will present 5 different ways of solving the CORS error once and for all. The fixes are given in order from best to worst, so I suggest first trying the first option, and if that does not work you can proceed to the next one.

1. Set up a proxy (recommended)

Set up a proxy. This is a fix that does not often show up when you Google how to fix CORS errors, but it is a solution I highly recommend. It is safe and reliable, and best of all, it does not require a lot of work to set up. How to set up a proxy depends on the programming language and package/library you are using, but I will show you have to fix it in Nuxt.js, as well as in React. In general, though, the change is just adding a few lines to your frontend. Do note though, that you should make sure that the target is the host you are running on.

Proxy in Nuxt:

//file: nuxt.config.ts 
//ADDED
 devServer: {
  proxy: {
    '^/api': {
   target: 'http://localhost:3000',
   changeOrigin: true
    },
  }
 }
 //ADDED