Làm Thế Nào Để Xử Lý Lỗi CORS Khi Phát Triển Web? Đừng Để Domain Khác Làm Khó Bạn!

1. CORS là gì và tại sao bạn cần quan tâm?

Khi phát triển web, chắc hẳn bạn đã từng gặp phải lỗi CORS (Cross-Origin Resource Sharing). Đây là một cơ chế bảo mật ngăn trình duyệt thực hiện các yêu cầu đến các nguồn tài nguyên từ một domain khác (cross-origin) mà không được phép.

Ví dụ, nếu trang web của bạn ở domain http://mywebsite.com cố gắng gọi API từ domain http://api.vnpt.net, trình duyệt sẽ chặn yêu cầu đó nếu không có sự cho phép rõ ràng từ máy chủ.

Tại sao lại có điều này?
Mục tiêu chính của CORS là để ngăn chặn các cuộc tấn công kiểu CSRF (Cross-Site Request Forgery), bảo vệ người dùng khi tương tác với các ứng dụng web từ các nguồn không đáng tin cậy.

2. Khi nào lỗi CORS xảy ra?

Lỗi CORS sẽ hiện ra trong console của trình duyệt với một thông báo tương tự như sau:

Access to XMLHttpRequest at 'http://api.vnpt.net' from origin 'http://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Để tránh sự cố này, bạn cần hiểu cách xử lý CORS.

3. Các bước xử lý lỗi CORS

Bước 1: Sử dụng CORS Headers từ phía server

Cách phổ biến nhất để xử lý lỗi CORS là cấu hình phía server cho phép domain của bạn truy cập vào tài nguyên. Phía server sẽ thêm các header CORS trong phản hồi của nó.

Ví dụ, với server Node.js sử dụng Express, bạn có thể làm như sau:

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

// Bật CORS cho mọi domain
app.use(cors());

app.get('/data', (req, res) => {
  res.json({ message: "Hello from VNTALKING!" });
});

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

Trong đoạn code này, chúng ta sử dụng thư viện cors của Express để tự động thêm các header CORS cần thiết.

• Access-Control-Allow-Origin: * cho phép mọi domain có thể truy cập API của bạn.

Bạn có thể cấu hình nó cho một domain cụ thể để bảo mật hơn:

app.use(cors({ origin: 'http://mywebsite.com' }));

Bước 2: Xử lý bằng Proxy (Khi không thể cấu hình server)

Trong một số trường hợp, bạn không có quyền truy cập hoặc cấu hình phía server. Giải pháp là sử dụng proxy server. Proxy sẽ giúp “trung gian” giữa client và server khác, tránh bị chặn CORS.

Ví dụ, với một dự án Vue.js, bạn có thể thêm một proxy vào file vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.vnpt.net',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

Trong trường hợp này, khi bạn gọi /api, proxy sẽ chuyển tiếp yêu cầu tới http://api.vnpt.net, từ đó bypass lỗi CORS.

Bước 3: Thêm CORS Header từ phía Frontend (Dành cho thử nghiệm)

Nếu bạn chỉ cần tạm thời vượt qua lỗi CORS trong giai đoạn thử nghiệm, bạn có thể tắt tính năng bảo mật CORS trên trình duyệt. Tuy nhiên, không nên dùng cách này trong môi trường sản xuất vì nó gây ra rủi ro bảo mật.

• Google Chrome: Bạn có thể chạy Chrome với flag --disable-web-security.

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDev"

4. Kết luận

Lỗi CORS là một vấn đề phổ biến nhưng dễ dàng khắc phục nếu bạn nắm rõ cách thức hoạt động của nó. Hãy nhớ, giải pháp tối ưu nhất là cấu hình server để hỗ trợ các yêu cầu từ các domain khác nhau. Nếu điều đó không khả thi, sử dụng proxy là lựa chọn thay thế tuyệt vời.

Tóm tắt các bước:

• Cấu hình server để cho phép CORS.
• Sử dụng proxy nếu không thể can thiệp vào server.
• Chỉ tắt CORS cho mục đích thử nghiệm.

Nếu bạn muốn khám phá thêm về các vấn đề liên quan đến phát triển web, hãy tiếp tục theo dõi VNTALKING! Chúng mình luôn có những bài viết thú vị và hữu ích dành cho các lập trình viên, từ người mới bắt đầu đến chuyên nghiệp.

Hãy thử nghiệm ngay và đừng ngại chia sẻ kinh nghiệm của bạn!