CORS error in deployment on Vercel

[zainkazi]

I'm getting this error in the console and the agent doesn't load up:

_Access to fetch at 'https://api.d-id.com/agents/agt_3oFQ_sxY' from origin 'https://did-agent-react.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled._

I'm using Vite + React.

Here's my code:
`import React, { useState, useEffect } from "react";
import * as sdk from "@d-id/client-sdk";
import AgentVideo from "./components/AgentVideo";
import ChatInput from "./components/ChatInput";
import LanguageSelector from "./components/LanguageSelector";
import SpeechRecognition from "./components/SpeechRecognition";
import MessageList from "./components/MessageList";
import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card";
import { Button } from "./components/ui/button";

interface Message {
id: string;
role: "user" | "assistant";
content: string;
}

const App: React.FC = () => {
const [agentManager, setAgentManager] = useState<sdk.AgentManager | null>(
null
);
const [connectionState, setConnectionState] =
useState("disconnected");
const [messages, setMessages] = useState<Message[]>([]);
const [agentName, setAgentName] = useState("");
const [srcObject, setSrcObject] = useState<MediaStream | null>(null);
const [isIdle, setIsIdle] = useState(true);
const [idleVideoSrc, setIdleVideoSrc] = useState("");

useEffect(() => {
initializeAgent();
}, []);

const initializeAgent = async () => {
const agentId = "agt_3oFQ_sxY";
const auth: sdk.Auth = {
type: "key",
clientKey:
"YXV0aDB8NjU2YWU4ZWYxMDYxNTlmMzc5MmNmN2U1OkVHam1TcTAyTHVCMENsdTVLRmNYVA==",
};

const callbacks: any = {
  onSrcObjectReady: (value: MediaStream) => {
    console.log("Source object ready:", value);
    setSrcObject(value);
    return value;
  },

  onConnectionStateChange: (state: string) => {
    setConnectionState(state);
    console.log("Connection state changed:", state);
  },
  onVideoStateChange: (state: string) => {
    console.log("Video state changed:", state);
    setIsIdle(state === "STOP");
  },

  onNewMessage: (newMessages: Message[], type: string) => {
    console.log("New message:", newMessages, type);
    setMessages((prevMessages) => [...prevMessages, ...newMessages]);
  },
  onError: (error: Error, errorData: any) => {
    console.error("Error:", error, "Error Data:", errorData);
  },
};

const streamOptions: any = {
  compatibilityMode: "auto",
  streamWarmup: true,
};

try {
  const newAgentManager = await sdk.createAgentManager(agentId, {
    auth,
    callbacks,
    streamOptions,
  });

  setAgentManager(newAgentManager);
  setAgentName(newAgentManager.agent.preview_name!);
  setIdleVideoSrc(newAgentManager.agent.presenter.idle_video!);
  newAgentManager.connect();
} catch (error) {
  console.error("Error creating agent manager:", error);
}

};

const handleChat = (text: string) => {
if (agentManager && text) {
agentManager.chat(text);
}
};

const handleSpeak = (text: string) => {
if (agentManager && text && text.length > 2) {
agentManager.speak({
type: "text",
input: text,
});
}
};

const handleReconnect = () => {
if (agentManager) {
agentManager.reconnect();
}
};

const handleDisconnect = () => {
if (agentManager) {
agentManager.disconnect();
}
};

return (

{agentName}

{connectionState}

          {connectionState === "disconnected" ? (
            <Button onClick={handleReconnect}>Reconnect</Button>
          ) : (
            <Button onClick={handleDisconnect}>Disconnect</Button>
          )}
        </div>
      </CardTitle>
    </CardHeader>
    <CardContent className="space-y-4">
      <div className="flex justify-center">
        <AgentVideo
          srcObject={srcObject}
          idleVideoSrc={idleVideoSrc}
          isIdle={isIdle}
        />
      </div>
      <MessageList messages={messages} />
      <ChatInput onChat={handleChat} onSpeak={handleSpeak} />
      <div className="flex justify-between items-center mt-4">
        <LanguageSelector />
        <SpeechRecognition onSpeechResult={handleChat} />
      </div>
    </CardContent>
  </Card>
</div>

);
};

export default App;
`