CORS Error and the CORSNotSupportingCredentials Issue

Whenever we work with an application under the web, there are many occasions where we need to fetch data from another source. Due to user and server security, browsers can implement a communication protocol called CORS. CORS, or Cross-Origin Resource Sharing, is a mechanism that allows browsers to exchange resources between different origins or domains. However, this CORS can sometimes lead to errors, resulting in issues like 'CORSNotSupportingCredentials'.

Often, when we work with APIs, we need to access the server to determine what cookies are sent or how authentication is handled. When CORS is active, the default state is that requests are made without sending cookies. This means that cookies or essential information from requests can be omitted, which can lead to CORS error.

Now, this 'CORSNotSupportingCredentials' error occurs when our server is unable or unwilling to accept requests that include cookies or additional information. This means the server says "No, I do not accept additional data" and the browser also denies this, resulting in an incomplete request.

A solution to this problem is to correctly configure CORS headers on the server. Our server must set the Access-Control-Allow-Credentials header to true and also specify a particular domain in the Access-Control-Allow-Origin header, such as https://example.com. Thus, this only applies to requests from that specific domain with additional information accepted.

Now let’s see a real example of configuring these headers:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://example.com');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

app.get('/data', (req, res) => {
    res.json({ message: 'Hello from server with CORS headers!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

This code above is a simple Node.js server using Express. First, in the Access-Control-Allow-Origin header, we specify the address that is allowed, such as https://example.com. This means that only requests from this domain will be accepted.
Then, we set the Access-Control-Allow-Credentials to true, meaning we accept requests that bring cookies or additional information.
Finally, we give a simple message back to ensure the server operates successfully.