Lỗi CORS (Cross-Origin Resource Sharing) là một vấn đề kỹ thuật thường gặp khiến website không thể tải tài nguyên từ một tên miền khác, gây gián đoạn hiển thị và ảnh hưởng xấu đến trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn các cách khắc phục lỗi CORS trên website một cách chi tiết và dễ hiểu nhất.
Tổng quan về lỗi CORS trên website
Trong quá trình phát triển và tích hợp API, lỗi CORS (Cross-Origin Resource Sharing) là một sự cố phổ biến trên các website WordPress. Tình trạng này xảy ra khi trình duyệt chủ động chặn các yêu cầu truy xuất tài nguyên do chính sách bảo mật, dẫn đến việc không thể tải dữ liệu hoặc tương tác với API từ một nguồn khác. Bài viết này sẽ đi sâu phân tích nguyên nhân, hướng dẫn cách kiểm tra, và tổng hợp các phương pháp hiệu quả để khắc phục lỗi CORS, được sắp xếp theo cấp độ từ cơ bản đến nâng cao.
5 Cách khắc phục lỗi CORS trên website
Cách 1: Kiểm tra và đồng bộ hóa URL trong WordPress
Đầu tiên, bạn cần đăng nhập vào trang quản trị (Admin) của website WordPress. Sau khi đăng nhập thành công, từ thanh menu bên trái, bạn truy cập vào mục Cài đặt và chọn Tổng quan (Settings → General).
Tại trang này, bạn hãy kiểm tra kỹ để đảm bảo rằng hai trường Địa chỉ WordPress (URL) và Địa chỉ trang web (Site URL) có giá trị hoàn toàn trùng khớp với nhau. Ví dụ, cả hai trường đều phải là https://myshop.com.
Trong trường hợp chúng có sự khác biệt (chẳng hạn một địa chỉ có tiền tố “www” và địa chỉ còn lại thì không), bạn cần điều chỉnh lại cho chúng hoàn toàn đồng nhất, sau đó cuộn xuống và nhấn nút Lưu Thay đổi để áp dụng cấu hình mới.
Cách 2: Thêm header CORS trong file .htaccess (Apache hoặc LiteSpeed)
Nếu website của bạn đang hoạt động trên máy chủ web Apache hoặc LiteSpeed, bạn có thể giải quyết vấn đề CORS bằng cách trực tiếp cấu hình header trong tệp .htaccess. Đầu tiên, bạn cần truy cập vào thư mục gốc của website WordPress và tìm tệp có tên là .htaccess. Sau đó, bạn hãy mở tệp này ra và thêm đoạn mã dưới đây vào cuối cùng:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>
Trong đoạn mã trên, dòng Header set Access-Control-Allow-Origin "*" sử dụng dấu * để cho phép tất cả các tên miền (domain) từ bên ngoài có thể truy cập vào tài nguyên trên trang của bạn. Tuy nhiên, để đảm bảo an toàn hơn, bạn chỉ nên cấp quyền cho những tên miền cụ thể mà bạn tin tưởng. Ví dụ, nếu bạn chỉ muốn cho phép https://myshop.com truy cập, bạn hãy thay thế dòng đó bằng dòng sau:
Header set Access-Control-Allow-Origin "https://myshop.com"
Cách 3: Thêm header CORS bằng plugin (cách dễ cho người không rành kỹ thuật)
Nếu bạn không quen với việc chỉnh sửa các tệp tin hệ thống của website, sử dụng plugin là một giải pháp thay thế đơn giản và an toàn hơn rất nhiều. Bạn có thể làm theo các bước sau:
- Đầu tiên, bạn hãy cài đặt và kích hoạt plugin có tên “Code Snippets” từ thư viện plugin của WordPress.
- Sau khi kích hoạt thành công, bạn sẽ thấy một mục mới tên là “Code Snippets” trên thanh menu quản trị. Bạn hãy truy cập vào Code Snippets → Add New để tạo một đoạn mã mới.
- Tại giao diện thêm snippet, bạn hãy sao chép và dán toàn bộ đoạn mã PHP dưới đây vào phần nội dung:
add_action( 'init', function() {
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
});
Cuối cùng, bạn chỉ cần lưu lại snippet và kích hoạt nó. Sau đó, bạn hãy kiểm tra lại bằng trình duyệt hoặc các công cụ dành cho nhà phát triển để xác nhận rằng lỗi CORS đã được khắc phục.
Cách 4: Sửa cấu hình trong Nginx (nếu không dùng Apache)
Nếu website của bạn đang hoạt động trên một máy chủ sử dụng Nginx (thay vì Apache), bạn sẽ cần can thiệp trực tiếp vào tệp tin cấu hình để thêm các header CORS. Bạn cần có quyền truy cập vào máy chủ (thường là qua SSH) và quyền quản trị (sudo) để thực hiện các bước sau.
Đầu tiên, bạn hãy mở tệp tin cấu hình virtual host của trang web. Đường dẫn phổ biến của tệp này là /etc/nginx/sites-available/your-site.conf, trong đó your-site.conf là tên tệp tin tương ứng với tên miền của bạn (ví dụ: mydomain.com.conf).
Sau khi đã mở tệp, bạn tìm đến khối server { ... } và dán đoạn mã sau vào bên trong nó:
Add_header ‘Vary’ ‘Origin’ always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'always;
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-Requested-With, Accept, Origin, Referer, User-Agent' always;
add_header 'Access-Control-Max-Age' 86400 always;
Sau khi bạn đã thêm cấu hình và lưu lại tệp tin, bước cuối cùng là ra lệnh cho Nginx tải lại cấu hình mới. Bạn hãy thực thi lệnh sau trong terminal:
sudo systemctl reload nginx
Lệnh này sẽ giúp Nginx áp dụng các thay đổi mà không làm gián đoạn hoạt động của máy chủ. Bây giờ, bạn có thể kiểm tra lại trên trình duyệt để xác nhận lỗi CORS đã được giải quyết.
Cách 5: Kiểm tra plugin bảo mật hoặc tường lửa
Đầu tiên, bạn cần kiểm tra các plugin bảo mật và dịch vụ tường lửa, vì chúng có thể vô tình can thiệp và xóa các header CORS cần thiết, gây ra lỗi.
Bạn hãy thử tạm thời vô hiệu hóa các plugin bảo mật phổ biến như Wordfence, Sucuri, hoặc iThemes Security rồi kiểm tra lại xem lỗi đã được khắc phục chưa. Nếu lỗi CORS biến mất, bạn hãy kích hoạt lại từng plugin một để xác định chính xác plugin nào là nguyên nhân gây ra sự cố.
Nếu bạn đang sử dụng Cloudflare, hãy đăng nhập vào tài khoản và truy cập mục Rules → Transform Rules, sau đó chọn tab Modify Response Header. Tại đây, bạn cần đảm bảo không có bất kỳ quy tắc nào đang thực hiện hành động xóa (Remove) header Access-Control-Allow-Origin khỏi phản hồi của trang web.
Kiểm tra kết quả sau khi khắc phục
Sau khi đã thực hiện các thay đổi, bạn cần tải lại trang web và xóa bộ nhớ đệm (cache) của trình duyệt để đảm bảo các cài đặt mới nhất được áp dụng.
- Bạn có thể thực hiện thao tác này nhanh chóng bằng cách nhấn tổ hợp phím
Ctrl + F5(trên Windows) hoặcCmd + Shift + R(trên macOS). - Tiếp theo, bạn hãy mở công cụ Chrome DevTools (nhấn phím
F12), chuyển sang tab Console và kiểm tra. - Nếu bạn không còn thấy bất kỳ cảnh báo lỗi màu đỏ nào có nội dung “blocked by CORS policy“, điều đó có nghĩa là sự cố đã được khắc phục thành công.
Lỗi CORS là một sự cố phổ biến trên các website WordPress, phát sinh khi trang web thực hiện các yêu cầu tài nguyên (như API, phông chữ, hoặc tệp tin) từ một tên miền khác.
Phương pháp khắc phục hiệu quả là định cấu hình các header CORS hợp lệ trên máy chủ, có thể thực hiện thông qua tệp .htaccess, sử dụng plugin chuyên dụng, hoặc điều chỉnh trực tiếp trong cấu hình của web server.
Khi đã được cấu hình chính xác, trình duyệt sẽ cho phép các yêu cầu cross-domain được thực thi thành công, giúp các tính năng phụ thuộc vào tài nguyên bên ngoài hoạt động ổn định và đúng như mong đợi.
Trên đây là những hướng dẫn chi tiết để khắc phục lỗi CORS trên website một cách nhanh chóng. Nếu bạn có bất kỳ thắc mắc nào hoặc cần hỗ trợ thêm trong quá trình xử lý lỗi, hãy liên hệ trực tiếp với đội ngũ kỹ thuật của Vietnix qua các kênh hỗ trợ để được hướng dẫn chuyên sâu và kịp thời.
VIETNIX – DỊCH VỤ HOSTING, VPS TỐC ĐỘ CAO, ỔN ĐỊNH, BẢO MẬT
- Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh
- Điện thoại: 1800 1093
- Email liên hệ: sales@vietnix.com.vn
- Website: https://vietnix.vn/
