1. What is CORS?

CORS (Cross-Origin Resource Sharing) is a security mechanism implemented by browsers to prevent unauthorized access to resources from a different domain than the web page making the request. It works by adding HTTP headers that specify which domains are allowed to access the server's resources.

Without CORS, a web application hosted on "https://example.com" would not be able to access the API from "https://api.example.com" because the browser blocks such requests for security reasons.

2. How do you identify CORS issues?

If you encounter a CORS-related problem, you will see an error in the browser console (F12 -> Console). Usually, the error message looks like this:

"Access to fetch at 'https://api.example.com/data' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

This error indicates that the API server does not allow access from the domain where the request originates.

3. How to solve CORS issues?

a) Configuring the server to allow CORS

The server must include the "Access-Control-Allow-Origin" header in its responses. Examples of configuration for different technologies:

• ASP.NET Core C#

public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin",
builder => builder.WithOrigins("https://example.com")
.AllowAnyMethod()
.AllowAnyHeader());
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors("AllowSpecificOrigin");
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}

• Apache: Add the following lines in the ".htaccess" file or in the server configuration:

Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

• Nginx Add to the server configuration:

add_header 'Access-Control-Allow-Origin' 'https://example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

b) Using a proxy

If you cannot modify the server configuration, you can use a proxy to make the request from the same domain.

Example of a proxy with Node.js:

const express = require('express');
const request = require('request');
const app = express();
app.use('/proxy', (req, res) => {
const url = 'https://api.example.com' + req.url;
req.pipe(request({ url })).pipe(res);
});
app.listen(3000, () => console.log('Proxy running on port 3000'));

c) Temporarily enabling CORS in the browser

For testing, you can disable the CORS policy using browser extensions like "Moesif CORS" for Chrome, but this is not a solution for production.

Conclusion

CORS is an essential security measure but can cause issues if the server is not configured correctly. Check errors in the console, make sure the server sends the appropriate headers, or use a proxy to bypass restrictions if you cannot modify the backend.