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

I've create a API populated from a swagger.json file and verified it works in the Test UI. The test UI request succeeds showing the headers passed below.

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

I've added a CORS policy for all operations. This is now updated to reflect the answer below.

The updated policy is:

<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>

When I try to execute the API from the web page that's generated for the API at: https://apiforqubo.developer.azure-api.net/api-detail, the request fails with the error:

Unable to complete the request

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

What am I missing?

UPDATE: policy statement to reflect specific website as suggested by Vitaliy Kurokhtin in the comments.

Regards, Rajesh

You've configured it to allow CORS requests only from https://azure-api.net, not from https://apiforqubo.developer.azure-api.net. Either use full URL or wildcard:

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