Các công cụ và phương pháp phổ biến để mô phỏng các yêu cầu có nguồn gốc chéo trong môi trường phát triển địa phương xoay quanh việc xử lý và bỏ qua các hạn chế chia sẻ tài nguyên có nguồn gốc chéo (CORS) do trình duyệt áp đặt. Các công cụ này giúp các nhà phát triển kiểm tra và gỡ lỗi các tương tác có nguồn gốc chéo bằng cách cho phép CORS trên các máy chủ cục bộ, sử dụng proxy hoặc tận dụng các phần mở rộng và cấu hình của trình duyệt. Dưới đây là thông tin chi tiết về một số phương pháp và công cụ phổ biến được sử dụng cho mục đích này.
Hiểu CORS
Chia sẻ tài nguyên có nguồn gốc (CORS) là một cơ chế bảo mật được triển khai trong các trình duyệt hạn chế các ứng dụng web chạy trên một nguồn gốc (miền, giao thức, cổng) truy cập tài nguyên ở một nguồn gốc khác trừ khi máy chủ cho phép rõ ràng thông qua các tiêu đề HTTP cụ thể. CORS hoạt động bởi các máy chủ gửi các tiêu đề trở lại như `Truy cập kiểm soát-cho phép-cho phép để chỉ ra tên miền nào được phép truy cập tài nguyên. Các trình duyệt thực thi điều này bằng cách gửi yêu cầu "preflight" (yêu cầu tùy chọn HTTP) cho một số loại cuộc gọi có nguồn gốc chéo nhất định để kiểm tra quyền trước khi thực hiện yêu cầu thực tế. Tiêu đề CORS kiểm soát không chỉ nguồn gốc nào được phép mà cả các phương thức và tiêu đề HTTP nào có thể được sử dụng, và liệu thông tin đăng nhập có thể được gửi hay không.
Những thách thức phát triển địa phương
Trong quá trình phát triển địa phương, các dự án thường chạy trên các cổng hoặc miền Localhost khác nhau, được tính là nguồn gốc khác nhau và kích hoạt các hạn chế của CORS, khiến việc thử nghiệm các yêu cầu có nguồn gốc chéo trở nên khó khăn. Các nhà phát triển cần các công cụ hoặc cấu hình mô phỏng hoặc bỏ qua các hạn chế này tại địa phương để cho phép mặt trước và back-end của họ giao tiếp đúng cách mà không ảnh hưởng đến môi trường sản xuất.
Công cụ và phương pháp để mô phỏng hoặc bỏ qua CORS tại địa phương
1. Proxying máy chủ cục bộ
Proxy là một trong những giải pháp mạnh mẽ và được sử dụng rộng rãi nhất. Nó liên quan đến việc chạy một máy chủ proxy hoạt động như một trung gian giữa máy khách và máy chủ API, định tuyến hiệu quả các yêu cầu có nguồn gốc chéo thông qua cùng một nguồn gốc để tránh các vấn đề CORS.
-Các máy chủ phát triển với hỗ trợ proxy tích hợp: Nhiều công cụ phát triển phía trước như VITE, WebPack Dev Server hoặc tạo hỗ trợ ứng dụng React cấu hình proxy. Ví dụ: tạo ứng dụng React cho phép các nhà phát triển xác định proxy trong `pack.json` hoặc` setupproxy.js` chuyển tiếp các cuộc gọi API đến một máy chủ khác đang chạy trên một cổng hoặc tên miền khác. Bằng cách này, trình duyệt nghĩ rằng nó đang giao tiếp với cùng nguồn gốc vì các yêu cầu được thực hiện cho chính máy chủ Dev, sau đó chuyển tiếp chúng đến máy chủ API đích.
-Máy chủ proxy độc lập: Các công cụ như http-proxy-middleware (cho node.js) hoặc các proxy cục bộ như nginx được cấu hình trên máy cục bộ có thể đóng vai trò là proxy để định tuyến yêu cầu và thêm các tiêu đề CORS cần thiết. Các nhà phát triển có thể định cấu hình các máy chủ này để sửa đổi các phản hồi một cách nhanh chóng để bao gồm `Truy cập kiểm soát-cho phép-cho phép: *` hoặc các tiêu đề thích hợp khác.
2. Bản sao API cục bộ hỗ trợ CORS
Chạy một ví dụ cục bộ của API hỗ trợ CORS là một cách tiếp cận hiệu quả khác. Bằng cách sử dụng docker hoặc thiết lập cục bộ, các nhà phát triển chạy API trên máy của họ với CORS được bật trong chế độ phát triển, cho phép đầu cuối chạy trên localhost để giao tiếp tự do mà không bị hạn chế. Điều này có lợi ích của việc kiểm soát hoàn toàn và không phụ thuộc vào môi trường bên ngoài.
3. Phần mở rộng trình duyệt để phát triển
Để kiểm tra nhanh hoặc gỡ lỗi, nhiều nhà phát triển sử dụng các tiện ích mở rộng trình duyệt để vô hiệu hóa hoặc sửa đổi hành vi CORS trong các trình duyệt tạm thời. Những công cụ này chỉ nên được sử dụng trong phát triển, không bao giờ trong sản xuất:
- CORS HPLOCK FOR CHROM: Phần mở rộng này sửa đổi các tiêu đề yêu cầu và cho phép các yêu cầu có nguồn gốc chéo bằng cách đưa các tiêu đề cần thiết vào các phản hồi để bỏ qua việc thực thi CORS của trình duyệt.
- CORS ở khắp mọi nơi cho Firefox: Tương tự như tiện ích mở rộng của Chrome, nó bật và tắt các hạn chế của CORS, cho phép các nhà phát triển kiểm tra các cuộc gọi có nguồn gốc chéo mà không thay đổi cấu hình máy chủ.
- Menu phát triển của Safari: Safari cho phép vô hiệu hóa tạm thời các hạn chế có nguồn gốc từ menu, hữu ích cho người dùng MAC thực hiện thử nghiệm cục bộ.
4. Chạy một máy chủ web cục bộ thay vì mở tệp
Một nguyên nhân gốc của lỗi CORS là tải các tệp trực tiếp với giao thức `File: //` trong trình duyệt. Nhiều hướng dẫn và Q & A chỉ ra rằng việc mở các trang HTML trực tiếp mà không có máy chủ web kích hoạt lỗi CORS vì các trình duyệt chặn nhiều hoạt động để bảo mật. Do đó, chạy một máy chủ HTTP cục bộ tối thiểu bằng các công cụ như máy chủ HTTP tích hợp của Python (`python3 -m http.server`), nút` http-server` của nút hoặc máy chủ trực tiếp cho phép chính xác nguồn gốc địa phương và tránh các lỗi này.
5. Tiêu đề phản hồi của máy chủ sửa đổi
Khi phát triển API hoặc dịch vụ phụ trợ của riêng bạn, việc thêm các tiêu đề CORS thường được thực hiện bằng cách bao gồm phần mềm trung gian hoặc định cấu hình máy chủ web để hỗ trợ CORS. Các khung và ngôn ngữ phụ trợ phổ biến đã thiết lập các cách cho phép CORS:
- Node.js/Express: Sử dụng gói phần mềm trung gian `CORS` đơn giản hóa việc thêm các tiêu đề CORS.
- API Web ASP.NET: Hỗ trợ các thuộc tính như `[enablecors]` cho phép chỉ định nguồn gốc, phương thức và tiêu đề được phép cho các yêu cầu có nguồn gốc chéo.
-Django: Phần mềm trung gian như `Django-Cors-Headers` được sử dụng để cho phép hỗ trợ CORS tại địa phương.
####.
Một số dịch vụ trực tuyến như BeecePtor cho phép các nhà phát triển kiểm tra API và bỏ qua CORS bằng cách định tuyến các yêu cầu thông qua các máy chủ proxy của họ. Các dịch vụ này thêm các tiêu đề CORS phù hợp, vì vậy trình duyệt chấp nhận các câu trả lời. Cách tiếp cận này rất hữu ích cho việc gỡ lỗi nhanh chóng khi thiết lập cục bộ là không khả thi nhưng nên được sử dụng thận trọng và không trong môi trường sản xuất.
***
Tóm tắt các công cụ và kỹ thuật phổ biến
- Dev Server Proxy: Sử dụng các khả năng proxy trong các công cụ như VITE, Tạo ứng dụng React, WebPack Dev Server.
-Máy chủ proxy cục bộ: http-proxy-middleware trong node.js, nginx được cấu hình dưới dạng proxy.
- API cục bộ có kích hoạt CORS: Chạy các thùng chứa Docker hoặc các phiên bản API cục bộ được cấu hình để phát triển với CORS.
- Phần mở rộng trình duyệt: CORS Unblock (Chrome), CORS ở khắp mọi nơi (Firefox), Safari vô hiệu hóa các hạn chế có nguồn gốc chéo.
-Máy chủ HTTP cục bộ: Chạy `http.server` của Python,` http-server` hoặc máy chủ trực tiếp thay vì sử dụng `file: //` urls.
-Phần mềm trung gian của Framework Framework: `CORS` cho Node.js,` [Enablecors] `Trong API Web ASP.NET,` Django-Cors Headers` cho Django.
- Dịch vụ proxy của bên thứ ba: BeecePtor và các dịch vụ tương tự để tạm thời bỏ qua CORS.