Depending on your server, there’s different stuff you need to do to setup CORS. I’ll show you how to set it up on nginx and Apache in this tutorial since those are the most common.

Why do you need CORS set up?

Before going into how to set it up, let’s discuss a little why you’d need CORS. The main reason why you need to set up CORS is because generally when building a web app with a separate backend and frontend, your backend will be on one url (ex. api.yoursite.com) and your frontend will be on another url (yoursite.com). While they’re on the same domain, in order to make ajax requests from your frontend url to your backend url, you will need to configure your server to allow for those requests to go through. This is what CORS allows for.

How to setup CORS on nginx

To set up CORS on nginx you will need to add this to your config file within the location block:

set $cors 'false';
if ($http_origin ~ '^https?://(your-frontend-site\.com)$') {
		set $cors 'true';
}


if ($cors = 'true') {
		add_header 'Access-Control-Allow-Origin' "http://your-frontend-site.com" always;
		add_header 'Access-Control-Allow-Credentials' 'true' always;
		add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS, PATCH' always;
		add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
}

Credit goes to this gist: https://gist.github.com/Stanback/7145487

Essentially this checks if the http origin is your frontend site and if it is, allow for GET, POST, PUT, DELETE, OPTIONS and PATCH requests. The allow credentials line also opens up the ability for any authentication cookies to be passed when making ajax requests.

How to setup CORS on Apache

Add the following bit of code to your virtualhost file if you are using Apache for your webserver:

Header always set Access-Control-Allow-Origin "https://your-frontend-site.com"
Header always set Access-Control-Allow-Credentials true
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT, PATCH"
Header always set Access-Control-Allow-Headers "Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With"

This looks pretty similar to the nginx configuration. It essentially does the exact same things just for Apache. It lets you make GET, POST, OPTIONS, DELETE, PUT and PATCH ajax requests from your frontend server.

---

One other thing to note, whether you’re using nginx or apache (or any other type of server) when making any kind of request other than GET requests, the browser will automatically send an OPTIONS request before making the actual request. So for example if you make an ajax POST request, the browser will first send an OPTIONS request, if the server responds with a 200 response code, then it will send the POST request. This is called a preflight request. It’s something you don’t necessarily need to worry about if you’re only building the frontend portion of your app, but if you’re responsible for the backend, you will need to handle the preflight OPTIONS request as well.