Hướng dẫn sửa lỗi Blocked by CORS cho Website WordPress

Sau nhiều đêm mất ngủ với cái lỗi quái quỷ “Blocked by CORS” khi mình dùng nhiều Domain cho 1 website WordPress gây ra. Thế là hôm nay, không biết may mắn ra sao, dọc một hồi cái fix được lúc nào không hay. Thế là phải tua lại bộ nhớ mới lòi ra được là fix lỗi blocked by CORS như thế nào. Mình sẽ đi chi tiết từng phần, để giải thích rõ mọi vấn đề, giúp mọi người dễ nắm hơn.

Blocked by CORS là gì?

Hiểu nôm na CORS là như vầy, nó là 1 tính năng bảo mật được dùng để quản lý request trích xuất nội dung từ 1 domain này tới 1 domain khác thông qua đoạn mã access trong header. Thường thì tính năng này được bật thả ga trên CDN, nhưng trên tất cả các hosting thì lại không.

Rất đơn giản, vì nếu hosting cho phép access CORS thì các stastic file của Website sẽ bị trích xuất vô tội vạ, dẫn đến việc hao tổn bandwitch cho việc leak tài nguyên.

Tuy nhiên, trong một số trường hợp các bạn nên bật, như là các bạn xai 2 domain cho 1 website chả hạn. Khi triển khai, mình đảm bảo các bạn sẽ bị trình duyệt chửi vô mặt dòng chữ “Blocked by CORS…” và thế là trang bị lỗi hiển thị do domain 2 không trích được file từ domain 1.

Thế là bài viết hướng dẫn sửa lỗi Blocked by CORS ra đời, các bạn tiếp tục theo dõi khúc dưới nhé :D.

Sửa lỗi Blocked by CORS cho Website sử dụng Shared Hosting

Hiện tại, mình sẽ lấy ví dụ là website của mình gồm hai domain thietkewebfree.com (cross domain) và liemmkt (domain phụ). Mình sử dụng tên miền liemmkt.com cho trang tin tức nên đã dùng plugin Multiple Domain Mapping để làm điều đó. Trong lúc sử dụng đã gặp lỗi như mình đã giải thích ở trên.

Mình đã thực hiện theo các step sau.

Bước 1: kiểm tra Hosting

Các bạn vào CPanel trên hosting vào mục Domains kiểm tra xem có tên miền phụ trong này không, nếu có thì xóa đi.

Tiếp theo, các bạn quay lại CPanel và truy cập vào Addon Domains và thêm tên miền phụ vào (nhớ để folder giống với tên miền chính). Các bạn nhớ chỉnh lại phiên bản PHP của domain phụ giống với domain chính nhé.

Sau khi đã hoàn tất các thao tác trên, các bạn tiếp tục quay lại CPanel, trượt xuống phần Software và click vào Perl Modules để tiến hành cài đặt module cho CORS.

Trong trang Perl Modules các bạn search CORS để tiến hành cài đặt CORS Modules.

Sau khi đã search xong, trang sẽ hiện thị các kết quả liên quan đến “CORS”. Các bạn hãy cài lần lượt hai modules sau:

  • Dancer;;Plugin;;CORS (0.13)
  • Mojolicious;;Plugin;;CORS (0.02)

Sau cùng, các bạn truy cập vào folder chứa website và thêm đoạn code sau vào file .htacess:

### - Ebable Access ControlHeader add Access-Control-Allow-Origin "*"Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"####<IfModule mod_headers.c><FilesMatch ".(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|icon)$">Header set Access-Control-Allow-Origin "*"</FilesMatch></IfModule>###<ifmodule mod_headers.c="">SetEnvIf Origin "^(.*.liemmkt.com)$" ORIGIN_SUB_DOMAIN=$1Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAINHeader set Access-Control-Allow-Methods: "*"Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"</ifmodule>###

Tada, vậy là hoàn tất khâu chỉnh sửa trên hosting, giờ thì đi tới bước tiếp theo nào.

Bước 2: Cài Plugin chỉnh Header để access CORS

Các bạn truy cập website wordpress của mình, tiến hành cài đặt plugin sau:

Sau khi đã cài đặt hoàn tất Plugin, các bạn truy cập theo các bước Trang quản trị > Cài Đặt > HTTP Headers để tiến hành tùy chỉnh Plugin.

Trong trang HTTP Headers, các bạn 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.

Trong trang Edit các bạn click vào nút On, chọn trong khung là Orgin và điền lần lượt Domain Phụ kèm dấu * và Domain chính kèm dấu * rồi ấn lưu để hoàn tất quá trình cài đặt.

Vậy là xong, bây giờ các bạn xóa cache của trang đi và đợi khoảng 1-2h sau là lỗi sẽ được fix.

Kết luận

Blocked by CORS thực chất là một chức năng chặn domain khách crawl data của website, mặc định trên CDN thì việc này không sao. Nhưng nếu trên website của bạn thì các stastic file sẽ bị leak 1 cách vô tội và nếu mở chức năng này lên. Tuy nhiên, chỉ những site lớn như kenh14, zing, vnexpress, v.v… mới quan ngại vấn đề này thôi.

Ngoài ra, các bạn có thể vào chuyên mục công cụ website để tìm thêm những bài viết chia sẻ đầy bỏ ích khác nhé.

Thietkewebfree – Liêm MKT

 

Trả lời

Facebook
Youtube
Zalo
Gọi Liêm