Cập Nhật Quan Trọng Về Cách Sử Dụng Các Liên Kết Tải Tệp Đã Tạo

Kính gửi Người dùng Tripo,

Chúng tôi viết thư này để thông báo về một thay đổi sắp tới có thể ảnh hưởng đến cách bạn truy cập và sử dụng các tài nguyên từ nền tảng của chúng tôi.

Điều gì đang thay đổi?

Chúng tôi sẽ áp dụng chính sách CORS trên tất cả các URL tạo tệp. Điều này có nghĩa là tất cả các tài nguyên được lưu trữ trên nền tảng của chúng tôi sẽ yêu cầu xử lý thích hợp cho các yêu cầu liên nguồn gốc, hay nói cách khác, bạn không thể trực tiếp phục vụ các tệp mô hình đã tạo bằng liên kết mà API của Tripo trả về cho bạn.

Tại sao điều này được thực hiện?

Thay đổi này là một phần trong cam kết của chúng tôi trong việc cải thiện bảo mật và ngăn chặn truy cập trái phép vào các tài nguyên từ các nguồn gốc khác nhau. CORS (Chia sẻ tài nguyên liên nguồn gốc) là một cơ chế cho phép máy chủ chỉ định các miền bên ngoài có thể truy cập tài nguyên.
Để biết thêm thông tin về CORS, bạn có thể tham khảo hướng dẫn của MDN.

Ảnh hưởng đến quy trình làm việc của bạn

Hiện tại, chúng tôi không cung cấp tiêu đề CORS cho các URL tệp. Do đó, nếu bạn đang sử dụng hoặc liên kết trực tiếp đến các tài nguyên này trong trình duyệt hoặc từ các miền bên ngoài, bạn có thể gặp sự cố.
Để đảm bảo tiếp tục truy cập vào các tệp này, bạn sẽ cần thực hiện một trong các hành động sau:

  1. Tải xuống và lưu lại tệp cục bộ: Bạn có thể tải xuống các tệp và lưu trữ chúng trên máy chủ của mình. Khi đã lưu cục bộ, bạn có thể phục vụ các tệp này từ máy chủ của mình mà không gặp ràng buộc CORS.
  2. Sử dụng proxy biên (ví dụ: API Route của Next.js, Cloudflare Workers): Bạn có thể sử dụng proxy biên để tải và phục vụ các tệp trong khi thêm các tiêu đề CORS cần thiết vào phản hồi. Ví dụ:
    • API Route của Next.js: Thiết lập một API route để tải tài nguyên từ nền tảng của chúng tôi và chuyển tiếp chúng với các tiêu đề CORS thích hợp.
    • Cloudflare Workers: Sử dụng Cloudflare Workers để thêm tiêu đề CORS khi phục vụ các tệp của chúng tôi từ máy chủ của bạn.

Cách chuẩn bị:

  • Xem lại tích hợp của bạn: Đảm bảo rằng hệ thống của bạn có khả năng xử lý CORS cho các URL tệp.
  • Tải xuống và lưu các tệp: Nếu bạn không sử dụng proxy biên, hãy cân nhắc tải xuống và lưu trữ các tệp trên máy chủ của bạn.
  • Thiết lập proxy biên: Nếu bạn đang sử dụng các giải pháp như Next.js hoặc Cloudflare Workers, hãy cập nhật cấu hình của bạn để đảm bảo rằng các tệp được phục vụ với các tiêu đề CORS thích hợp.
  • Kiểm tra hệ thống của bạn: Xác minh rằng tất cả các yêu cầu liên nguồn gốc đến nền tảng của chúng tôi hoạt động như mong đợi.

Cần ví dụ mã thực tế? Nếu bạn không chắc chắn cách bắt đầu hoặc thấy quá trình khó triển khai, chúng tôi đã cung cấp các đoạn mã thực tế để giúp bạn bắt đầu. Vui lòng tham khảo Phụ lục để biết thêm chi tiết.

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

  • Tệp đã tạo của tôi có bị mất không?
    Không. Bạn luôn có thể lấy URL mới từ API bất cứ lúc nào.
  • Tôi không trả về URL của bạn trực tiếp, nhưng tôi có thực hiện một số xử lý sau. Tôi có nên lo lắng không?
    Nếu bạn không trả về URL của chúng tôi trực tiếp cho người dùng của mình, bạn có thể bỏ qua thay đổi này. Tuy nhiên, chúng tôi khuyên bạn nên theo dõi việc sử dụng của mình, đặc biệt nếu bạn nhận thấy bất kỳ sự gia tăng lỗi hoặc hành vi bất thường nào trong hệ thống của bạn.

Cần hỗ trợ?

Chúng tôi hiểu rằng thay đổi này có thể yêu cầu cập nhật quy trình làm việc của bạn. Nếu bạn cần bất kỳ trợ giúp nào trong việc thiết lập proxy biên hoặc có bất kỳ câu hỏi nào về quá trình chuyển đổi này, vui lòng liên hệ với nhóm hỗ trợ của chúng tôi tại support@tripo3d.ai.
Chúng tôi đánh giá cao sự hợp tác của bạn khi chúng tôi nỗ lực tăng cường bảo mật trên nền tảng của mình! Chúc bạn an toàn và làm việc hiệu quả!
Trân trọng,
Đội ngũ Tripo

Phụ lục A: Phương pháp lưu lại ở máy chủ

Nếu bạn đang sử dụng FastAPI (dễ dàng chuyển đổi hoặc dịch sang bất kỳ framework hoặc ngôn ngữ nào khác), đây là cách bạn có thể điều chỉnh mã hiện tại của mình để xử lý CORS và lưu tệp cục bộ:

Mã hiện tại:

python
@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # API hoạt động
    return resp.json()['url']

Bạn có thể dễ dàng sửa đổi nó thành:

python
import httpx
import uuid

from fastapi.responses import FileResponse
from fastapi import HTTPException

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # giống như trên

    # Thêm mã bên dưới
    file_id = str(uuid.uuid4())
    with httpx.Client() as client:
        # Tải xuống tệp
        response = client.get(url)

        # Kiểm tra xem yêu cầu có thành công không
        if response.status_code == 200:
            # Sau đó lưu lại
            with open(f"./downloaded/{file_id}.glb", "wb") as file:
                file.write(response.content)

    return file_id

@app.get("/artifact/{file_id}")
def download(file_id: str) -> FileResponse:
    if os.path.exists(f"./downloaded/{file_id}.glb"):
      return FileResponse(f"./downloaded/{file_id}.glb")
    raise HTTPException(status_code=404, detail="Không tìm thấy mục")

Sau khi tải xuống và lưu tệp cục bộ, bạn nên phục vụ người dùng của mình URL mới. Ví dụ: nếu ứng dụng của bạn được lưu trữ tại https://app.example.com, URL bạn nên phục vụ sẽ trông như thế này:

text
https://app.example.com/artifact/<file_id>

Đoạn mã này chỉ là một minh họa về cách điều chỉnh tích hợp của bạn. Tuy nhiên, có một số điều quan trọng bạn nên xem xét:

  • Thêm xác thực thích hợp: Đảm bảo rằng các liên kết tải xuống được bảo vệ bằng các phương pháp xác thực thích hợp để ngăn chặn truy cập trái phép.
  • Sử dụng bộ lưu trữ đáng tin cậy: Nên lưu tệp vào các giải pháp lưu trữ đáng tin cậy hơn, chẳng hạn như máy chủ chuyên dụng hoặc các tùy chọn lưu trữ đám mây như S3 buckets.
  • Lưu trữ siêu dữ liệu: Giữ bản ghi siêu dữ liệu tệp trong cơ sở dữ liệu hoặc hệ thống lưu trữ khác của bạn để sử dụng trong tương lai (chẳng hạn như theo dõi hoặc kiểm toán).

Phụ lục B: Phương pháp Proxy biên

Nếu bạn đang phát triển một Ứng dụng trang đơn (SPA) hoặc máy chủ Backend cho Frontend (BFF) và không muốn xử lý việc tải xuống và lưu trữ tệp trực tiếp trên máy chủ của mình, bạn có thể sử dụng phương pháp proxy biên. Điều này cho phép bạn tải tệp từ máy chủ của chúng tôi, áp dụng các tiêu đề CORS cần thiết và sau đó phục vụ tệp cho người dùng của bạn.

Giải pháp 1: Tải xuống và gửi lại tệp bằng Edge Functions

Dưới đây là ví dụ về cách triển khai phương pháp này bằng Cloudflare Workers. Giải pháp này sẽ xử lý các vấn đề CORS bằng cách tải xuống tệp và gửi lại dưới tên miền của bạn.

javascript
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // Phân tích URL yêu cầu
  const url = new URL(request.url);

  // Lấy URL mục tiêu từ tham số truy vấn 'url'
  const targetUrl = url.searchParams.get('url');

  // Nếu không có URL nào được cung cấp, trả về lỗi
  if (!targetUrl) {
    return new Response('Vui lòng cung cấp tham số URL', {
      status: 400,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }

  // Xử lý yêu cầu OPTIONS preflight
  if (request.method === 'OPTIONS') {
    return handleCORS();
  }

  try {
    // Tải tệp từ URL mục tiêu
    const response = await fetch(targetUrl);

    // Nếu tải không thành công, trả về lỗi
    if (!response.ok) {
      return new Response(`Không thể tải từ URL mục tiêu: ${response.statusText}`, {
        status: response.status,
        headers: corsHeaders()
      });
    }

    // Lấy loại nội dung từ phản hồi hoặc mặc định là octet-stream
    const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

    // Lấy content disposition hoặc tạo từ URL
    let contentDisposition = response.headers.get('Content-Disposition');
    if (!contentDisposition) {
      // Trích xuất tên tệp từ URL
      const fileName = targetUrl.split('/').pop().split('?')[0] || 'file';
      contentDisposition = `attachment; filename="${fileName}"`;
    }

    // Tạo phản hồi mới với tiêu đề CORS
    const newResponse = new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        'Content-Type': contentType,
        'Content-Disposition': contentDisposition,
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Cache-Control': 'public, max-age=3600' // Lưu cache trong 1 giờ
      }
    });

    return newResponse;
  } catch (error) {
    return new Response(`Lỗi khi tải tệp: ${error.message}`, {
      status: 500,
      headers: corsHeaders()
    });
  }
}

// Xử lý các yêu cầu CORS preflight
function handleCORS() {
  return new Response(null, {
    status: 204, // Không có nội dung
    headers: corsHeaders()
  });
}

// Tạo đối tượng tiêu đề CORS
function corsHeaders() {
  return {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Max-Age': '86400' // 24 giờ
  };
}

Khi Cloudflare Worker của bạn đã được thiết lập, bạn có thể tích hợp nó vào SPA của mình bằng cách sử dụng mã JavaScript sau để tải tệp:

javascript
fetch('https://your-worker-url.workers.dev/?url=<target_url>')
  .then(response => response.blob())
  .then(blob => {
    // Tạo liên kết tải xuống
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-file.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();
  })
  .catch(error => console.error('Lỗi:', error));

Giải pháp này hoàn hảo cho SPA hoặc máy chủ BFF cần bỏ qua các hạn chế CORS trong khi tải xuống và phục vụ tệp cho người dùng cuối. Tệp được tải từ URL mục tiêu, chuyển qua proxy biên và được phục vụ với các tiêu đề CORS cần thiết.

Giải pháp 2: Thiết lập proxy tiêu đề CORS

Nếu bạn muốn thiết lập một proxy CORS đơn giản, bạn có thể tham khảo ví dụ này do Cloudflare cung cấp: Cloudflare Workers - CORS Header Proxy
Điều này sẽ cho phép bạn xử lý các yêu cầu liên nguồn gốc dễ dàng hơn, trong khi vẫn tuân thủ các chính sách CORS.

Những lưu ý quan trọng:

  • Xác thực: Đảm bảo bảo mật các edge function của bạn bằng các phương pháp xác thực (ví dụ: API keys, OAuth, v.v.) để ngăn chặn truy cập trái phép vào tệp của bạn.
  • Lưu trữ: Mặc dù phương pháp này hoạt động, chúng tôi vẫn khuyên bạn nên lưu tệp trên máy chủ của mình để sử dụng trong tương lai, đặc biệt nếu bạn cần quản lý tải xuống quy mô lớn hoặc đảm bảo truy cập đáng tin cậy vào tài nguyên.

Bài viết liên quan

Thông báo
Sự kiện Giáng Sinh của Tripo: Khắc ghi ký ức của bạn với cây thông Noel 3D

Tạo cây thông Noel 3D và đồ trang trí được cá nhân hóa của riêng bạn với Tripo. Thiết kế, trang trí và chia sẻ các sáng tạo lễ hội của bạn ở chất lượng 3D cao, lưu giữ những ký ức của năm qua. Hãy tham gia sự kiện Giáng Sinh 3D 2024 ngay hôm nay.

Maisie
📅 · 2024/12/17
Thông báo
Giới thiệu Tripo H3.1: Mô hình chi tiết cao cho tài sản sẵn sàng cho sản xuất

Tripo H3.1 tạo ra các mô hình 3D độ trung thực cao với hình học dày đặc và chi tiết ở cấp độ sản xuất, lý tưởng cho hero asset, hình ảnh marketing, rendering và in 3D.

Tripo Team
📅 · 2026/03/06
Thông báo
VAST Tháng Mã Nguồn Mở | TripoSG & TripoSF, Thiết Lập SOTA Mới trong Tạo Sinh 3D

VAST ra mắt Tháng Mã Nguồn Mở với việc phát hành TripoSG và TripoSF, hai mô hình 3D nền tảng mang lại hiệu suất hiện đại về tốc độ, độ chính xác và tạo cấu trúc bên trong.

Maisie
📅 · 2025/04/01
Chia sẻ bài viết

Tạo mọi thứ trong 3D

Nhấn vào đây để tham gia cùng hàng triệu nhà sáng tạo 3D. Trải nghiệm khả năng tạo mô hình siêu chi tiết và texture PBR hàng đầu.