Ludo Programming

1. Ce este CORS?

CORS (Cross-Origin Resource Sharing) este un mecanism de securitate implementat de browsere pentru a preveni accesul neautorizat la resurse dintr-un domeniu diferit de cel al paginii web care face solicitarea. Acesta functioneaza prin adaugarea unor anteturi HTTP care specifica ce domenii au permisiunea de a accesa resursele serverului.

Fara CORS, o aplicatie web gazduita pe "https://exemplu.com" nu ar putea accesa API-ul de pe "https://api.exemplu.com", deoarece browserul blocheaza astfel de cereri din motive de securitate.

2. Cum identifici problemele CORS?

Daca intampini o problema legata de CORS, vei observa o eroare in consola browserului (F12 -> Console). De obicei, mesajul de eroare arata astfel:

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

Aceasta eroare indica faptul ca serverul API nu permite accesul din domeniul de unde provine cererea.

3. Cum sa rezolvi problemele de CORS?

a) Configurarea serverului pentru a permite CORS

Serverul trebuie sa includa antetul "Access-Control-Allow-Origin" in raspunsurile sale. Exemple de configurare pentru diferite tehnologii:

• ASP.NET Core C#

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

• Apache: Adauga urmatoarele linii in fisierul ".htaccess" sau in configuratia serverului:

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

• Nginx Adauga in configuratia serverului:

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

b) Utilizarea unui proxy

Daca nu poti modifica configuratia serverului, poti folosi un proxy pentru a face cererea din acelasi domeniu.

Exemplu de proxy cu Node.js:

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

c) Activarea CORS temporar in browser

Pentru testare, poti dezactiva politica CORS folosind extensii de browser precum "Moesif CORS" pentru Chrome, insa aceasta nu este o solutie pentru productie.

Concluzie

CORS este o masura de securitate esentiala, dar poate cauza probleme daca serverul nu este configurat corect. Verifica erorile din consola, asigura-te ca serverul trimite anteturile corespunzatoare sau foloseste un proxy pentru a depasi restrictiile daca nu poti modifica backend-ul.