Cấu Hình CORS Trong ASP.NET Web API Để Sử Dụng Chéo Domain

1. Giới Thiệu về CORS

CORS (Cross-Origin Resource Sharing) là cơ chế cho phép trình duyệt gửi yêu cầu từ một domain khác với domain của server. Mặc định, trình duyệt chặn các yêu cầu cross-origin vì lý do bảo mật. Do đó, nếu bạn đang phát triển một API chạy trên một server riêng biệt và muốn cho phép các client từ domain khác truy cập, bạn cần cấu hình CORS.

2. Cài Đặt Thư Viện Cho ASP.NET Web API

Trước khi cấu hình CORS, bạn cần đảm bảo đã cài đặt thư viện Microsoft.AspNet.WebApi.Cors. Nếu chưa có, bạn có thể cài đặt bằng NuGet Package Manager:

Install-Package Microsoft.AspNet.WebApi.Cors

3. Cấu Hình CORS Trong Web API

3.1. Kích Hoạt CORS Trong WebApiConfig.cs

Mở file WebApiConfig.cs và thêm đoạn mã sau để bật CORS cho toàn bộ API:

using System.Web.Http;
using System.Web.Http.Cors;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Kích hoạt CORS
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
        
        // Cấu hình các route mặc định
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

Giải thích:

• EnableCorsAttribute("*", "*", "*"): Cho phép tất cả domain (*), tất cả header và tất cả phương thức HTTP (GET, POST, PUT, DELETE, v.v.). Nếu bạn muốn chỉ cho phép một số domain cụ thể, hãy thay "*" bằng danh sách domain, ví dụ: "https://example.com".
• config.EnableCors(cors): Bật CORS cho toàn bộ API.

3.2. Cấu Hình CORS Cho Từng Controller Hoặc Action

Nếu bạn muốn áp dụng CORS chỉ cho một số controller hoặc action cụ thể, bạn có thể sử dụng [EnableCors] trên controller hoặc action đó:

using System.Web.Http;
using System.Web.Http.Cors;

[EnableCors(origins: "https://example.com", headers: "*", methods: "*")]
public class VideoController : ApiController
{
    public IHttpActionResult Get()
    {
        return Ok("API Video đang hoạt động!");
    }
}

4. Cấu Hình CORS Trong OWIN Middleware (Nếu Dùng OWIN)

Nếu ứng dụng của bạn sử dụng OWIN (ví dụ khi dùng Startup.cs), bạn cần thêm CORS vào pipeline của OWIN:

using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;
using System.Web.Http;

[assembly: OwinStartup(typeof(MyApp.Startup))]

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        HttpConfiguration config = new HttpConfiguration();

        // Bật CORS
        app.UseCors(CorsOptions.AllowAll);

        WebApiConfig.Register(config);
        app.UseWebApi(config);
    }
}

Trong trường hợp này, CorsOptions.AllowAll sẽ bật CORS cho tất cả các domain.

5. Thêm cấu hình trong file config

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration

6. Kiểm Tra CORS Hoạt Động Hay Không

Sau khi cấu hình CORS, bạn có thể kiểm tra bằng cách gửi request từ một domain khác với API server:

fetch('https://localhost:44301/api/video', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Lỗi:', error));

Nếu request thành công mà không bị lỗi CORS policy, nghĩa là bạn đã cấu hình đúng.

7. Kết Luận

Việc bật CORS trong ASP.NET Web API rất quan trọng khi bạn phát triển ứng dụng web có API server riêng. Bạn có thể bật CORS toàn cục hoặc chỉ áp dụng cho một số API cụ thể. Nếu dùng OWIN, bạn cần bật CORS trong Startup.cs thay vì WebApiConfig.cs. Hy vọng bài viết này giúp bạn hiểu rõ cách cấu hình CORS trong Web API!

Chúc bạn thành công!