我创建了一个带有 REST 端点的 Azure 机器学习模型作为使用它的方式。当我使用 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)
});
});
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!
正如我的评论中所述，该错误很可能与 CORS 问题有关。
请考虑配置您的 REST 端点以发送适合您的 Javascript 应用程序的 CORS 标头。
您似乎正在使用 API 管理来公开 REST 端点：如果这是正确的，您可以通过定义适当的方法来配置 CORSpolicy https://learn.microsoft.com/en-us/azure/api-management/api-management-policies.
此页面提供有关以下方面的必要信息如何设置或编辑 API 管理策略 https://learn.microsoft.com/en-us/azure/api-management/set-edit-policies?tabs=form.
CORS 政策记录在这另一页 https://learn.microsoft.com/en-us/azure/api-management/cors-policy。该文档提供了示例配置 https://learn.microsoft.com/en-us/azure/api-management/cors-policy#example，适合您的用例：
<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>
这个相关的SO问题 https://stackoverflow.com/questions/67244072/how-configure-azure-api-management-for-cors也可能有帮助。
此外，请考虑包括Accept header https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept在发布您的信息时，我们遇到了调用 API 管理服务公开的 API 时不存在此标头的问题，我不确定，但我认为默认情况下不包含该标头fetch（与邮递员相反）：
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)
});