Một trong những vấn đề phổ biến trong phát triển web hiện đại là hiện tượng truy cập chéo miền (CORS - Cross-Origin Resource Sharing). Hiện tượng này xuất phát từ cơ chế bảo mật của trình duyệt.

Nguyên Nhân Xuất Hiện Vấn Đề Truy Cập Chéo Miền

Cơ chế chính sách cùng nguồn (Same-Origin Policy) của trình duyệt là nguyên nhân chính gây ra vấn đề này. Đây là một quy tắc bảo mật thiết yếu, ngăn chặn các đoạn mã JavaScript từ một miền khác tương tác với nội dung của miền hiện tại. Hai tài nguyên được coi là cùng nguồn nếu chúng có cùng giao thức, tên miền và cổng kết nối.

Khái Niệm Truy Cập Chéo Miền

Khi một yêu cầu có bất kỳ sự khác biệt nào về giao thức, tên miền hoặc cổng so với trang hiện tại, đó được xem là truy cập chéo miền. Dưới đây là bảng minh họa:

Các Hạn Chế Khi Không Cùng Nguồn

• Không thể truy cập dữ liệu từ Cookie, LocalStorage, IndexedDB của miền khác
• Không thể thao tác với DOM của trang không cùng nguồn
• Không thể gửi yêu cầu AJAX đến địa chỉ không cùng nguồn

Các Phương Pháp Xử Lý CORS

Một số giải pháp phổ biến bao gồm JSONP, CORS, Nginx và các phương pháp khác. Dưới đây là cách cấu hình CORS trong ứng dụng ASP.NET Core:

Bước 1: Đăng ký dịch vụ CORS trong phương thức ConfigureServices:

public void ConfigureServices(IServiceCollection serviceContainer)
{
    serviceContainer.AddCors(options =>
    {
        options.AddPolicy("allowSpecificOrigins", builder =>
        {
            builder
                .WithOrigins(
                    "http://localhost:3000",
                    "http://127.0.0.1:3000",
                    "http://localhost:4200",
                    "http://127.0.0.1:4200"
                )
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
        });
    });
}

Bước 2: Áp dụng middleware trong phương thức Configure:

public void Configure(IApplicationBuilder application, IWebHostEnvironment environment)
{
    application.UseCors("allowSpecificOrigins");
    
    // Các middleware khác...
    application.UseRouting();
    application.UseAuthentication();
    application.UseAuthorization();
    application.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Việc cấu hình này cho phép các miền đã chỉ định thực hiện các yêu cầu HTTP đến API của bạn, đồng thời duy trì tính bảo mật cần thiết cho ứng dụng web.