logo
GeekFormat

Trình tạo CORS Header

Trình tạo tiêu đề CORS

Tạo các tiêu đề Access-Control-Allow-* cho các tình huống cross-origin phổ biến. Phát hiện sớm các xung đột ký tự đại diện và thông tin xác thực.

Kết quả đã tạo

Danh sách kiểm tra CORS

1. Nếu sử dụng cookie hoặc thông tin xác thực ủy quyền, trình duyệt không chấp nhận * làm Allow-Origin.

2. Các yêu cầu preflight thường cũng yêu cầu máy chủ phản hồi đúng cách OPTIONS.

3. Frontend chỉ có thể thấy các tiêu đề phản hồi không đơn giản được暴露 qua Access-Control-Expose-Headers.

Xem trước JSON

{
  "headers": [
    {
      "name": "Access-Control-Allow-Origin",
      "value": "https://app.geekformat.com"
    },
    {
      "name": "Access-Control-Allow-Methods",
      "value": "GET, POST, PATCH, DELETE, OPTIONS"
    },
    {
      "name": "Access-Control-Allow-Headers",
      "value": "Content-Type, Authorization, X-Request-Id"
    },
    {
      "name": "Access-Control-Expose-Headers",
      "value": "ETag, X-Trace-Id"
    },
    {
      "name": "Access-Control-Allow-Credentials",
      "value": "true"
    },
    {
      "name": "Access-Control-Max-Age",
      "value": "600"
    }
  ],
  "warnings": []
}

Cấu hình header phản hồi CORS trực tuyến, ít gặp lỗi chi tiết cross-domain.

Đề xuất Liên quan

Trường hợp sử dụng

  • Khi tích hợp front-end/back-end, hãy tạo một phiên bản header CORS chuẩn trước để nhanh chóng xác minh có phải vấn đề cấu hình không
  • Khi kiểm tra lỗi cross-domain trình duyệt, định vị xung đột giữa Allow-Origin và Credentials qua cảnh báo
  • Tạo khối cấu hình cross-domain có thể sao chép trực tiếp cho Nginx, gateway hoặc dịch vụ back-end
  • Xác nhận Methods, Headers và Max-Age có chính xác không khi xử lý cấu hình yêu cầu preflight OPTIONS

Tính năng

  • Tạo trực tiếp trường cross-domain: Origin, Methods, Headers, Credentials được cấu hình đầy đủ trong một lần
  • Phù hợp áp dụng trực tiếp vào cấu hình: Nginx, gateway, dịch vụ back-end đều ít viết sai hơn
  • Thân thiện với kịch bản preflight: Phù hợp xử lý yêu cầu OPTIONS, tích hợp API và kiểm tra lỗi cross-domain trình duyệt
  • Tạo xong là sao chép: Kết quả đầu ra rõ ràng chuẩn mực, có thể dùng trực tiếp cho cấu hình gateway, proxy và dịch vụ back-end

Cách Sử dụng

  1. Điền nguồn được phép (Origin), phương thức yêu cầu, header yêu cầu, header hiển thị và có mang theo credentials không
  2. Công cụ tự động tạo khối cấu hình header phản hồi CORS chuẩn và hiển thị cảnh báo xung đột
  3. Xem danh sách kiểm tra CORS để xác nhận cấu hình có hợp lý không
  4. Sao chép khối header phản hồi đã tạo để dùng cho cấu hình máy chủ hoặc gỡ lỗi API

Câu hỏi Thường gặp

Làm thế nào để tạo nhanh header phản hồi CORS chính xác?

Điền nguồn được phép, phương thức, header yêu cầu và có mang theo credentials không trước, sau đó tạo header phản hồi tương ứng; cách này ổn định hơn viết tay và dễ tránh xung đột giữa ký tự đại diện và credentials.

Tại sao Access-Control-Allow-Origin không thể dùng cùng ký tự đại diện với Credentials?

Khi cho phép mang theo credentials, trình duyệt không chấp nhận nguồn ký tự đại diện. Công cụ này giúp bạn nhận diện sớm các xung đột thường gặp này, giảm lỗi cross-domain khi tích hợp.

Có phù hợp xử lý cấu hình yêu cầu preflight OPTIONS không?

Phù hợp. Nó có thể giúp tạo đồng thời các trường liên quan preflight thường gặp như Methods, Headers, Max-Age, dùng cho tích hợp cross-domain front-end/back-end và cấu hình gateway.

Có thể sao chép trực tiếp vào cấu hình máy chủ để sử dụng không?

Có thể. Kết quả tạo ra phù hợp sao chép vào Nginx, Express, Spring Boot, quy tắc gateway hoặc cấu hình dịch vụ máy chủ khác, tiết kiệm thời gian viết tay header phản hồi.