Azure Machine Learning REST Endpoint - Failed to Fetch

Question

I created an Azure Machine Learning model with a REST Endpoint as a way to consume it. When I run the service using Postman everything seems to work fine.

However, when I try to create an HTML website (Codepen) with a javascript to call the REST Endpoint I only get an Error: Failed to Fetch message.

I also tried with Azure Static Web Apps and I am unsuccessful as well.

I was however able to verify (in the Console) that my input to the Rest Endpoint via Codepen is the same as Postman.

Is there anything I am missing out here?

Here is a sample of 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);
            const result = data.result[0]; // Get the result array from the response
            const volumeForecastElement = document.querySelector('#volume-forecast');
            volumeForecastElement.textContent = result.join(', '); // Update the text content of the <b> element with the result array joined by commas
            document.getElementById("result").innerHTML = result;
        })
        .catch(error => {

            document.getElementById("error").innerHTML = error.message;
            console.error(error.message)
        });
});

And here is what I get in Postman:

update: I added the CORS setting in the Azure API Management and still has the issue:

3-10-2023 update: I added the Accept Header in the Javascript and removed the access key for the moment. Also changed the API to HTTPS just to see if things change.Also changed the CORS value in the API

It works with Postman though but not with the Javascript:

Last Update: Changed CORS again and it now works!

Answer 1

As stated in my comment, the error could be very likely related to a CORS problem.

Please, consider configuring your REST endpoint for sending the CORS headers appropriate for your Javascript application.

You seem to be using API Management for exposing the REST endpoint: if that is correct, you can configure CORS by defining the appropriate policy.

This page provides the necessary information about how to set or edit API Management policies.

The CORS policy is documented in this other page. The documentation provides a sample configuration, adapted for your use case:

<cors allow-credentials="true">
    <allowed-origins>
        <!-- Localhost useful for development -->
        <origin>http://localhost:8080/</origin>
        <origin>http://your-javascript-app-domain.com/</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>POST</method>
    </allowed-methods>
    <allowed-headers>
        <header>content-type</header>
        <header>accept</header>
    </allowed-headers>
</cors>

This related SO question could be of help as well.

Additionally, please, consider including an Accept header when posting your information, we have experienced problems when this header is not present when invoking an API exposed by the API Management service, I am not absolutely sure, but I think it is not included by default by fetch (in contrast to Postman):

fetch('http://ziggyapimanagementservice.azure-api.net/score', {
        method: 'POST',
        headers: {
            'Accept': '*/*',
            'Content-Type': 'application/json',
            'Ocp-Apim-Subscription-Key': 'cd529cc993494fdfb1530eaf04ae63dc'
        },
        body: testData
    })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            const result = data.result[0]; // Get the result array from the response
            const volumeForecastElement = document.querySelector('#volume-forecast');
            volumeForecastElement.textContent = result.join(', '); // Update the text content of the <b> element with the result array joined by commas
            document.getElementById("result").innerHTML = result;
        })
        .catch(error => {

            document.getElementById("error").innerHTML = error.message;
            console.error(error.message)
        });