toolsmoah

Trình kiểm tra CORS

Kiểm tra và gỡ lỗi các chính sách và yêu cầu API Chia sẻ tài nguyên giữa các nguồn gốc (CORS)

Cài đặt yêu cầu
Định cấu hình yêu cầu API của bạn để kiểm tra
Yêu cầu ví dụ
Hãy thử các yêu cầu API được xác định trước này
Thông tin CORS
Thông tin cơ bản về CORS

CORS là gì? CORS (Chia sẻ tài nguyên giữa các nguồn gốc) là một cơ chế cho phép các trình duyệt web thực hiện các yêu cầu giữa các nguồn gốc (tên miền, giao thức hoặc cổng khác nhau) từ các tập lệnh chạy trong trình duyệt.

Tiêu đề CORS chính

  • Access-Control-Allow-Origin: Chỉ định nguồn gốc nào được phép truy cập tài nguyên
  • Access-Control-Allow-Methods: Chỉ định phương thức HTTP nào được phép
  • Access-Control-Allow-Headers: Chỉ định tiêu đề HTTP nào có thể được sử dụng
  • Access-Control-Allow-Credentials: Chỉ định có bao gồm thông tin xác thực (cookie, xác thực HTTP) hay không

💡 Giải pháp CORS

Giải pháp phía máy chủ

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Giải pháp phía máy khách

1. Sử dụng máy chủ proxy:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (chỉ GET):

// Giải pháp hạn chế nhưng đơn giản
          fetch('api?callback=handleResponse')

🔧 Cấu hình CORS theo môi trường

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

Cấu hình CORS theo môi trường

Kịch bản kiểm tra

  • • Yêu cầu đơn giản: Kiểm tra hành vi CORS cơ bản với các yêu cầu GET
  • • Yêu cầu kiểm tra trước: Kiểm tra các yêu cầu kiểm tra trước với các phương thức PUT/DELETE
  • • Tiêu đề tùy chỉnh: Kiểm tra các yêu cầu có tiêu đề Authorization
  • • Thông tin xác thực: Kiểm tra các yêu cầu có cookie
  • • Xử lý lỗi: Kiểm tra các kịch bản lỗi

Cân nhắc về bảo mật

  • • Hãy thận trọng với việc sử dụng ký tự đại diện (*) do rủi ro bảo mật
  • • Nguyên tắc đặc quyền tối thiểu: Chỉ cho phép các nguồn gốc và phương thức cần thiết
  • • Hạn chế thông tin xác thực: Chỉ cho phép các nguồn gốc cụ thể khi bao gồm thông tin xác thực
  • • Xem xét thường xuyên: Định kỳ xem xét và cập nhật các chính sách CORS

Mẹo gỡ lỗi CORS

Công cụ dành cho nhà phát triển trình duyệt

  • • Kiểm tra các yêu cầu OPTIONS trong tab Mạng
  • • Tìm kiếm các thông báo lỗi CORS trong Bảng điều khiển
  • • Xác minh các tiêu đề CORS trong Tiêu đề phản hồi

Công cụ hữu ích

  • • Trình kiểm tra CORS (công cụ này)
  • • Postman (để kiểm tra API)
  • • lệnh curl (để kiểm tra máy chủ trực tiếp)
    Trình kiểm tra CORS