reactjs - Vấn đề CORS với NestJS và Vercel chỉ khi thực hiện các yêu cầu POST

Yêu cầu GET hoạt động tốt nhưng tôi đang sử dụng SWR để thực hiện các yêu cầu POST để gửi dữ liệu lên firebase và thay đổi trạng thái như thế này nhưng tôi không thể thực hiện các yêu cầu POST

const item = await fetcher.POST(`/jobs?user_id=${user.id}`, _job)

        mutate(item)

Fetcher được thiết lập như thế này, HOST là đường dẫn tới API

fetcher.POST = (
  url,
  data,
  headers = {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
) => {
  return fetcher(HOST + url, {
    method: 'POST',
    headers,
    body: JSON.stringify(data)
  })
}

Đây là lỗi của tôi trong console ---- Truy cập fetch tại 'https://example-api.vercel.app/v1/jobs?user_id=8JKY8PRM5APwIz1' từ nguồn 'https://workshop-4i8ymvm1s.vercel.app' đã bị chính sách CORS chặn: Phản hồi cho yêu cầu preflight không vượt qua kiểm tra điều khiển truy cập: Không có header 'Access-Control-Allow-Origin' nào có mặt trên tài nguyên được yêu cầu. Nếu một phản hồi mờ đáp ứng nhu cầu của bạn, hãy đặt chế độ của yêu cầu là 'no-cors' để lấy tài nguyên với CORS bị tắt.

Trên hàm serverless NestJS của tôi, tôi đã thiết lập CORS như thế này trong các tệp index.ts & main.ts của tôi. (Điều này có phải là vấn đề không?) ---

 const app = await NestFactory.create(AppModule, {
    snapshot: true,
    logger: new Logg(),
    cors: true
  });

&&

  app.enableCors({
    allowedHeaders: '*',
    origin: '*',
    credentials: false,
  });

Tôi đã xem qua các tài liệu nhưng dường như không thấy các phương án thay thế.

Tôi đã thử trên Postman và nó hoạt động, nhưng điều đó không sử dụng trình duyệt mà chỉ để kiểm tra xem nó có hoạt động hay không và nó thì hoạt động.

Câu trả lời #1

Bạn có tệp vercel.json trong api nestjs của bạn không?

Vercel sẽ ghi đè cấu hình CORS của bạn, vì vậy hãy tạo một tệp tại thư mục gốc của dự án Nest của bạn như mã dưới đây. Vui lòng thay đổi các đường dẫn để phù hợp với cấu trúc mã của bạn và đảm bảo rằng bạn có phương thức OPTIONS, vì phương thức này cần thiết cho các yêu cầu POST.

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "Access-Control-Allow-Origin": "*"
      },
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE",
        "PATCH",
        "OPTIONS"
      ]
    }
  ]
}

Câu trả lời #2

Câu trả lời là chỉ cần thêm OPTIONS vào danh sách các phương thức trong vercel.json

Xem: Vấn đề với CORS trong ứng dụng Nest.js sau khi triển khai trên Vercel