What the heck is CORS error anyway and how to solve it?

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a security mechanism implemented by web browsers that restrict web pages from making requests to a different domain than the one that served the page.

In other words, when a web page loaded from one origin (such as a domain) tries to access resources (such as an API endpoint or a file) on a different origin, the web browser blocks the request by default to prevent unauthorized access to sensitive information.

CORS allows web pages to make cross-origin requests by including specific HTTP headers in the request and response. These headers specify which domains are allowed to access the resources, what types of requests are allowed, and what type of data can be sent in the request.

If you are a front-end developer, chances are you have already seen CORS error in your app.

How to fix CORS Errors?

There are several ways to solve a CORS error, depending on the cause of the error. Here are some common solutions:

1. Enable CORS on the server-side:

   If you have control over the server that is hosting the resource, you can configure it to allow cross-origin requests by including the appropriate CORS headers in the response. The headers that need to be included are: Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, and Access-Control-Allow-Credentials.

2. Use a proxy server:

   If you don't have control over the server hosting the resource, you can use a proxy server to make the request on your behalf. The proxy server can be hosted on the same domain as your web application, which means that the request will not be considered a cross-origin request.

3. Use JSONP:

   JSONP is a technique for making cross-domain requests that does not rely on CORS. It involves adding a script tag to the web page that points to a URL on the remote domain. The remote domain returns a script that calls a function on the web page, passing in the requested data as a parameter.

4. Use a browser extension:

   Some browser extensions, such as CORS Everywhere, can be used to bypass CORS restrictions in the browser. However, this is not a recommended solution as it can compromise the security of your web application.

It's important to note that enabling CORS on the server-side is the recommended solution as it provides a secure way to allow cross-origin requests.

How to enable CORS on server side for node.js

To enable CORS on the server side for Node.js, you can use the cors middleware. Here are the steps:

1. Install the cors middleware using npm:

npm install cors

1. In your Node.js server code, require the cors module:

const cors = require('cors');

1. Use the cors middleware in your server code. There are two ways to use cors:

   a. To allow all cross-origin requests, add the following line of code before your routes:

app.use(cors());

b. To allow cross-origin requests from specific domains, you can pass an options object to the cors middleware:

const corsOptions = {
  origin: 'http://example.com'
}

app.use(cors(corsOptions));

In the above example, only cross-origin requests from http://example.com will be allowed.

1. Set the appropriate headers in your server response. The cors middleware automatically sets the necessary headers to enable CORS, but you can also set the headers manually if you prefer:

res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true);

In the above example, only cross-origin requests from http://example.com will be allowed, and the server will accept requests with Content-Type headers and credentials.

That's it! With these steps, you should be able to enable CORS on your Node.js server.

To read more about CORS issue:

• What are CORS proxies and when are they safe?

• Become a CORS Wizard

• Solve CORS error in node.js app

Thank you for reading!