Importante aggiornamento su come utilizzare i link per il download dei file generati

Cari utenti di Tripo,

Vi scriviamo per informarvi di una prossima modifica che potrebbe influire sul modo in cui accedete e utilizzate le risorse della nostra piattaforma.

Cosa sta cambiando?

Applicheremo la CORS policy a tutti gli URL degli artifact generati. Questo significa che tutte le risorse ospitate sulla nostra piattaforma richiederanno una gestione appropriata delle richieste cross-origin oppure, in altre parole, non potete servire direttamente i file dei modelli generati utilizzando il link che l'API di Tripo vi restituisce.

Perché viene implementata questa modifica?

Questa modifica fa parte del nostro impegno per migliorare la sicurezza e prevenire accessi non autorizzati alle risorse tra origini diverse. CORS (Cross-Origin Resource Sharing) è un meccanismo che consente ai server di specificare quali domini esterni possono accedere alle risorse.
Per maggiori informazioni su cosa sia CORS, potete consultare la guida di MDN.

Impatto sul vostro flusso di lavoro

Attualmente non forniamo header CORS per gli URL degli artifact. Di conseguenza, se state utilizzando o collegando direttamente queste risorse in un browser o da domini esterni, potreste riscontrare problemi.
Per garantire l'accesso continuo a questi asset, dovrete intraprendere una delle seguenti azioni:

1. Scaricare e salvare nuovamente gli artifact in locale: Potete scaricare gli artifact e memorizzarli sul vostro backend. Una volta salvati localmente, potrete servire questi asset dal vostro server senza restrizioni CORS.
2. Utilizzare un Edge Proxy (ad es. Next.js API Route, Cloudflare Workers): Potete usare un edge proxy per recuperare e servire gli artifact aggiungendo gli header CORS necessari alle risposte. Ad esempio:
   • Next.js API Route: Configurate una API route per recuperare le risorse dalla nostra piattaforma e inoltrarle con gli header CORS appropriati.
   • Cloudflare Workers: Utilizzate Cloudflare Workers per aggiungere header CORS quando servite i nostri asset dal vostro server.

Come prepararsi:

• Verificate la vostra integrazione: Assicuratevi che il vostro sistema sia in grado di gestire CORS per gli URL degli artifact.
• Scaricate e salvate gli artifact: Se non state utilizzando un edge proxy, considerate di scaricare e memorizzare gli artifact sul vostro backend.
• Configurate un edge proxy: Se state usando soluzioni come Next.js o Cloudflare Workers, aggiornate la vostra configurazione per assicurarvi che gli asset vengano serviti con gli header CORS appropriati.
• Testate il vostro sistema: Verificate che tutte le richieste cross-origin verso la nostra piattaforma funzionino come previsto.

Avete bisogno di esempi di codice pratici? Se non sapete bene da dove iniziare o trovate il processo difficile da implementare, abbiamo fornito snippet di codice pratici per aiutarvi a partire. Fate riferimento all'Appendice per maggiori dettagli.

FAQ

• Il mio file generato è andato perso?
  No. Potete sempre recuperare un nuovo URL dall'API in qualsiasi momento.
• Non restituisco direttamente il vostro URL, ma eseguo un po' di post-processing. Devo preoccuparmi?
  Se non state restituendo direttamente il nostro URL ai vostri utenti, potete ignorare questa modifica. Tuttavia, consigliamo di monitorare l'utilizzo, soprattutto se notate picchi di errori o comportamenti anomali nel vostro sistema.

Avete bisogno di assistenza?

Comprendiamo che questa modifica possa richiedere aggiornamenti al vostro flusso di lavoro. Se avete bisogno di aiuto per configurare un edge proxy o avete domande su questa transizione, contattate il nostro team di supporto all'indirizzo support@tripo3d.ai.
Apprezziamo la vostra collaborazione mentre lavoriamo per migliorare la sicurezza sulla nostra piattaforma! Restate al sicuro e produttivi!
Cordiali saluti,
Il team di Tripo

Appendice A: Approccio di salvataggio sul backend

Se state usando FastAPI (che è facile da adattare o tradurre in qualsiasi altro framework o linguaggio), ecco come potete modificare il vostro codice esistente per gestire CORS e salvare l'artifact localmente:

Codice attuale:

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # API works
    return resp.json()['url']

Potete modificarlo facilmente in questo modo:

import httpx
import uuid

from fastapi.responses import FileResponse
from fastapi import HTTPException

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # same as above

    # Add the code below
    file_id = str(uuid.uuid4())
    with httpx.Client() as client:
        # Download the artifact
        response = client.get(url)

        # Check if the request was successful
        if response.status_code == 200:
            # Then resave it
            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="Item not found")

Dopo aver scaricato e salvato il file localmente, dovreste servire ai vostri utenti il nuovo URL. Ad esempio, se la vostra applicazione è ospitata su https://app.example.com, l'URL che dovreste servire sarà simile a questo:

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

Questo snippet di codice è solo una dimostrazione di come adattare la vostra integrazione. Tuttavia, ci sono alcune cose importanti che dovreste considerare:

• Aggiungete un'autenticazione adeguata: Assicuratevi che i link di download siano protetti dai metodi di autenticazione appropriati per prevenire accessi non autorizzati.
• Utilizzate uno storage affidabile: Si consiglia di salvare i file su soluzioni di storage più affidabili, come server dedicati o opzioni di cloud storage come i bucket S3.
• Memorizzate i metadata: Conservate un record dei metadata degli artifact nel vostro database o in un altro sistema di storage per usi futuri (come tracciamento o auditing).

Appendice B: Approccio Edge Proxy

Se state sviluppando una Single Page Application (SPA) o un server Backend for Frontend (BFF) e preferite non gestire direttamente sul vostro server il download e lo storage dei file, potete utilizzare un approccio edge proxy. Questo vi consente di recuperare il file dal nostro server, applicare gli header CORS necessari e poi servirlo ai vostri utenti.

Soluzione 1: Scaricare e reinviare il file usando Edge Functions

Di seguito è riportato un esempio di come implementare questo approccio usando Cloudflare Workers. Questa soluzione gestirà i problemi CORS scaricando il file e reinviandolo sotto il vostro dominio.

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

async function handleRequest(request) {
  // Parse the request URL
  const url = new URL(request.url);

  // Get the target URL from the 'url' query parameter
  const targetUrl = url.searchParams.get('url');

  // If no URL is provided, return an error
  if (!targetUrl) {
    return new Response('Please provide a URL parameter', {
      status: 400,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }

  // Handle preflight OPTIONS request
  if (request.method === 'OPTIONS') {
    return handleCORS();
  }

  try {
    // Fetch the file from the target URL
    const response = await fetch(targetUrl);

    // If the fetch failed, return the error
    if (!response.ok) {
      return new Response(`Failed to fetch from target URL: ${response.statusText}`, {
        status: response.status,
        headers: corsHeaders()
      });
    }

    // Get the content type from the response or default to octet-stream
    const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

    // Get the content disposition or create one from the URL
    let contentDisposition = response.headers.get('Content-Disposition');
    if (!contentDisposition) {
      // Extract filename from the URL
      const fileName = targetUrl.split('/').pop().split('?')[0] || 'file';
      contentDisposition = `attachment; filename="${fileName}"`;
    }

    // Create a new response with CORS headers
    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' // Cache for 1 hour
      }
    });

    return newResponse;
  } catch (error) {
    return new Response(`Error fetching the file: ${error.message}`, {
      status: 500,
      headers: corsHeaders()
    });
  }
}

// Handle CORS preflight requests
function handleCORS() {
  return new Response(null, {
    status: 204, // No content
    headers: corsHeaders()
  });
}

// Create CORS headers object
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 hours
  };
}

Una volta configurato il vostro Cloudflare Worker, potete integrarlo nella vostra SPA usando il seguente codice JavaScript per recuperare il file:

fetch('https://your-worker-url.workers.dev/?url=<target_url>')
  .then(response => response.blob())
  .then(blob => {
    // Create a download link
    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('Error:', error));

Questa soluzione è perfetta per SPA o server BFF che devono aggirare le restrizioni CORS durante il download e la distribuzione dei file agli utenti finali. Il file viene recuperato dall'URL di destinazione, fatto passare attraverso l'edge proxy e servito con gli header CORS necessari.

Soluzione 2: Configurare un proxy per header CORS

Se preferite configurare un semplice proxy CORS, potete fare riferimento a questo esempio fornito da Cloudflare: Cloudflare Workers - CORS Header Proxy
Questo vi consentirà di gestire più facilmente le richieste cross-origin, pur continuando a rispettare le CORS policy.

Considerazioni importanti:

• Autenticazione: Assicuratevi di proteggere adeguatamente le vostre edge functions con metodi di autenticazione (ad es. API keys, OAuth, ecc.) per prevenire accessi non autorizzati ai vostri file.
• Storage: Sebbene questo approccio funzioni, consigliamo comunque di salvare l'artifact sul vostro server per usi futuri, soprattutto se dovete gestire download su larga scala o garantire un accesso affidabile alle risorse.