从网页调用 API 失败，但在测试页面中成功

Question

我创建了一个从 swagger.json 文件填充的 API 并验证它在测试 UI 中有效。测试 UI 请求成功显示下面的 headers 已通过。

POST https://apiforqubo.azure-api.net/api/Qubo HTTP/1.1
Host: apiforqubo.azure-api.net
Content-Type: application/json
Ocp-Apim-Subscription-Key: ••••••••••••••••••••••••••••••••
Ocp-Apim-Trace: true

我已经为所有操作添加了 CORS 策略。现在已更新以反映以下答案。

更新后的政策是：

<policies>
    <inbound>
        <base />
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://apiforqubo.developer.azure-api.net</origin>
            </allowed-origins>
            <allowed-methods>
                <method>POST</method>
                <method>GET</method>
                <method>PUT</method>
            </allowed-methods>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

当我尝试从为 API 生成的网页执行 API 时：https://apiforqubo.developer.azure-api.net/api-detail，请求失败并显示错误：

Unable to complete the request

Since the browser initiates the request, it requires Cross-Origin Resource Sharing (CORS) enabled on the server.

我错过了什么？

更新：反映 Vitaliy Kurokhtin 在评论中建议的特定网站的政策声明。

此致，拉杰什

Answer 1

您已将其配置为仅允许来自 https://azure-api.net 的 CORS 请求，而不允许来自 https://apiforqubo.developer.azure-api.net 的 CORS 请求。使用完整的 URL 或通配符：

<origin>https://*.azure-api.net/</origin>

Answer 2

请在 APIM 的政策中添加 allowed-headers 政策元素

从网页调用 API 失败，但在测试页面中成功

Invoking API fails from web page, though succeeds in Test pages

azure

azure-api-management