Lỗi blocked by CORS policy trên WordPress 2024

CORS policy là một cơ chế cho phép nhiều tài nguyên khác nhau (fonts, Javascript, icons v.v…) của một trang web có thể được truy vấn từ các Domain khác và hiển thị với chính Domain của trang đó. CORS là viết tắt của từ Cross-origin resource sharing.

1. Cách nhận biết lỗi Blocked by CORS policy

Khi bạn nhận thấy website có các dấu hiệu bất thường ví dụ như lỗi font, giao diện, hay các icons trên website hiển thị lỗi thì nhấn F12 >> và chọn tab Console để xem log. Nếu bạn thấy log báo tương tự bên dưới nghĩa là website của bạn đang bị lỗi CORS policy. Lỗi này thường xảy ra khi sử dụng nhiều Domain cùng một source.

Với Log trên các bạn có thể hiểu là website xyz.site (phụ) đang call API tới website abc.site (chính) lấy tài nguyên icons, nhưng ở phía Server của website abc.site không có Header Access-Control-Allow-Origin hoặc giá trị của nó không hợp lệ thì sẽ trả về log lỗi như trên.

Và hình ảnh mình họa dưới đây là ví dụ điển hình về lỗi CORS policy, website không thể get icons dẫn đến icons bị lỗi hiển thị.

2. Hướng dẫn xử lý lỗi blocked by CORS policy trên WordPress

Để xử lý vấn đề này, chúng ta sẽ thực hiện 1 trong 2 cách như sau.

Cách 1: Sử dụng Plugin

Để xử lý lỗi CORS policy, các bạn có thể cài đặt Plugin tên HTTP Headers và kích hoạt Plugin lên.

Tiếp đó các bạn vào cài đặt của Plugin >> chọn ACCESS CONTROL

Tại đây, các bạn kiếm phần “Access-Control-Allow-Origin” và chọn Edit để thêm Domain.

Các bạn chọn On và thêm Domain phụ và chính vào.

Lúc này bạn sẽ thấy status On như hình.

Cách 2: Sử dụng .htaccess

Nếu các bạn không muốn cài đặt Plugin, có một cách khác để bạn có thể xử lý vấn đề là thêm rule bên dưới vào trực tiếp file .htaccess của website đang bị lỗi sau đó Save lại.

# BEGIN CORS
<IfModule mod_headers.c>
<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
</IfModule>
# END CORS

Qua bài viết trên chắc bạn cũng đã hiểu thêm về cách giải quyết vấn đề “blocked by CORS policy” một cách đơn giản và hiệu quả trên WordPress. Cám ơn bạn đã dành thời gian xem qua bài viết này !

P.A Việt Nam cung cấp đa dạng các Plan Hosting WordPress đáp ứng yêu cầu của khách hàng
WordPress Hosting phổ thông
WordPress Hosting chất lượng cao
WordPress VIP

Tham khảo các bài viết liên quan đến wordpress hosting : https://kb.pavietnam.vn/category/phan-mem/open-source/wordpress

Tham khảo các ưu đãi: https://www.pavietnam.vn/vn/tin-khuyen-mai/