Azure 机器学习 REST 端点 - 无法获取

Question

我创建了一个 Azure 机器学习模型，并使用 REST 端点作为使用它的方式。当我使用 Postman 运行服务时，一切似乎都工作正常。

但是，当我尝试使用 javascript 创建 HTML 网站 (Codepen) 来调用 REST 端点时，我只收到错误:无法获取消息。

我还尝试过使用 Azure Static Web Apps，但也没有成功。

但是，我能够(在控制台中)验证我通过 Codepen 对 Rest 端点的输入与 Postman 相同。

我在这里错过了什么吗？

这是我的 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)
        });
});

这是我在 Postman 中得到的:

更新:我在 Azure API 管理中添加了 CORS 设置，但仍然存在问题:

2023 年 3 月 10 日更新:我在 Javascript 中添加了 Accept header ，并暂时删除了访问 key 。还将 API 更改为 HTTPS 只是为了看看情况是否发生变化。还更改了 API 中的 CORS 值

它可以与 Postman 一起使用，但不能与 Javascript 一起使用:

最后更新:再次更改了 CORS，现在可以使用了!

Answer 1

正如我的评论中所述，该错误很可能与 CORS 问题有关。

请考虑配置您的 REST 端点以发送适合您的 Javascript 应用程序的 CORS header 。

您似乎正在使用 API 管理来公开 REST 端点:如果正确，您可以通过定义适当的 policy 来配置 CORS。 .

此页面提供有关 how to set or edit API Management policies 的必要信息.

CORS 政策记录在 this other page 中。该文档提供 a sample configuration ，适合您的用例:

<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也可能有帮助。

此外，请考虑添加 Accept header在发布您的信息时，我们遇到了调用 API 管理服务公开的 API 时不存在此 header 的问题，我不确定，但我认为 fetch 默认情况下不包含它(与 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)
        });