Azure Machine Learning Service - Working in Postman but not in HTML, Javascript

Question

I created an Azure Machine Learning Service, an Azure Static Web App, and an Azure API Management service to handle the Rest Endpoint of the Azure ML Service.

Everything works fine in Postman but it will not work in HTML and Javascript in my Azure Static Web App.

Here is what it looks like in Postman:

Here is what my HTML looks like. As you can see in my HTML code, I displayed the JSON data to be sent along with the Post. I also showed the error message at the bottom:

In both instances, I sent along with the header the subscription key.

Here is my javascript

<script>
    const form = document.querySelector('#agriculture-form');
    form.addEventListener('submit', (event) => {
        event.preventDefault();

        const areaHarvest = parseFloat(document.querySelector('#area-harvest').value);
        const farmGatePrice = parseFloat(document.querySelector('#farm-gate-price').value);
        const volumeOfImport = parseFloat(document.querySelector('#volume-of-import').value);
        const lowTemp = parseFloat(document.querySelector('#low-temp').value);
        const averageTemp = parseFloat(document.querySelector('#average-temp').value);
        const highTemp = parseFloat(document.querySelector('#high-temp').value);
        const precipitationMm = parseFloat(document.querySelector('#precipitation-mm').value);
        const precipitationDays = parseFloat(document.querySelector('#precipitation-days').value);
        const tropicalCyclones = parseFloat(document.querySelector('#tropical-cyclones').value);
        const volumeProductionGuess = 0;

        const data = {
            "Area_Harvested": areaHarvest,
            "FarmGatePricePHPPSA": farmGatePrice,
            "Volume_of_Import": volumeOfImport,
            "temp_low": lowTemp,
            "temp_ave": averageTemp,
            "temp_high": highTemp,
            "precipitation_mm": precipitationMm,
            "precipitation_days": precipitationDays,
            "tropical_cyclone": tropicalCyclones,
            "Volume_of_Production": volumeProductionGuess
        };
      
        const formattedData = [data]; 
        console.log('formatted data:', formattedData);
        const testData = JSON.stringify(formattedData);
        console.log('test data:', testData);
        document.getElementById("demo").innerHTML = testData;
          
        fetch('http://ziggyapimanagementservice.azure-api.net/score', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Ocp-Apim-Subscription-Key': 'cd529cc993494fdfb1530eaf04ae63dc'
              },
        body: testData
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => { 
             document.getElementById("error").innerHTML = error.message;
             console.error(error.message)
          });
    });
</script>