Issue with calling Azure AI Foundry API in React Native Environment

Question

Hi there,

I'm working on a mobile application development project that connects to Azure AI Foundry Prompt Flow. It's essentially a knowledge-based AI chatbot app. Currently, I'm facing an issue with calling the API from the Image Prompt Flow.

As shown in the picture above, this is my simple prompt flow for processing the image input.

Additionally, I have set the 'Type' of question (input) as a List, which should be available for both image and text input. My expected result is to get the extracted text from the uploaded image in the chatbot.

The function testing in the Azure environment is working fine. However, in my own React Native project environment, when I attempt to call the API, it returns errors like this:

And the code below there is how I call the API in my React Native environment.

import axios from 'axios';
const apiKey = process.env.IMAGE_API_KEY;
const endpoint = process.env.IMAGE_PROMPT_ENDPOINT;
// Headers for authentication (similar to GPT-4o style)
const headers = {
  'Content-Type': 'application/json',
  'api-key': apiKey, // Updated to Bearer token if required
};
// Function to clean response text
function cleanResponseText(text) {
  return text.replace(/[*#-]/g, '').replace(/\n{2,}/g, '\n\n').trim();
}
// Function to analyze image with a question and chat history
export const analyzeImage = async (question, imageBase64, mimeType, chatHistory = []) => {
  try {
    if (!apiKey || !endpoint) {
      throw new Error('API key or endpoint is missing. Check environment variables.');
    }
    // Construct payload
    const payload = {
      question: question,
      image: imageBase64,
      mimeType: mimeType,
      chat_history: chatHistory,
    };
    console.log('Sending Payload:', payload);
    // Send POST request for image analysis
    const response = await axios.post(endpoint, payload, { headers });
    console.log('Raw Response:', response.data);
    // Clean and return the response
    if (response.data && response.data.analysis) {
      const cleanText = cleanResponseText(response.data.analysis);
      return { analysis: cleanText, metadata: response.data.metadata || {} };
    } else {
      throw new Error('No valid response received from the image analysis API.');
    }
  } catch (error) {
    console.error('Error during image analysis:', error.response?.data || error.message);
    throw new Error(error.response?.data?.message || 'Image analysis failed.');
  }
};

Is the API call failing due to a problem in the code?

Anyone could assist me with this issue? Many thanks in advance!