CODEWITHSUNDEEP
swaggeropenapiazure-api-management
evolmonster
evolmonster

Reputation: 302

Expose documentation with azure API management

I have an API that is set up in azure API management. It was set up using OpenAPI as we have swagger documentation for the API. I now want to send this API to external clients, and give them a documentation page to view how to use the API. So how do I expose the swagger index.html page to the outside world, and not require a subscription key to view it?

I tried adding a new API endpoint of /swagger, and added the following on the inbound processing :

    <set-backend-service base-url="https://myapi.azurewebsites.net" />
    <rewrite-uri template="/index.html" />

But I get back a blank page. It looks like the CSS and JS is a 404:

enter image description here

Upvotes: 0

Views: 2409

Answers (2)

evolmonster
evolmonster

Reputation: 302

Thanks for all the help guys. I somehow didn't know the developer portal was a thing! I am just playing with getting that set up now, and it is awesome! Just what I needed.

For those who can't find it like me, its here :

enter image description here

Thanks!

Upvotes: 0

Tiny Wang
Tiny Wang

Reputation: 16076

I have an idea could be an option for you.

I have a service which call https://f0xxx2bc.ngrok.io/view will get an html in the browser. If I add an endpoint in apim to set it connect to my web page url, it can show the content but css file lost(404 error like yours). According to the error message, we can find it results from the error url, in other words we can't visit the css file directly through apim instance. So we can only use the server url of the html page.

enter image description here

My idea to this issue is make the endpoint redirect to my url. But it seems no difference to expose this url to users. So I prefer to suggest you to use apim developer portal, it can be considered to play the role of official tool to display all details about using api.

After creating a new endpoint, we can set inbound policy for it and make it redirect to your web page, using the html url in your backend service. But this will made your backend url exposed in the browser.

Here's my test policy and after setting this, when I visit the api endpoint, it can redirect to my html page and css file is certainly working.

<inbound>
        <base />
        <choose>
            <when condition="true">
                <return-response>
                    <set-status code="303" reason="reason" />
                    <set-header name="Location" exists-action="override">
                        <value>@("https://fxxxxdc2bc.ngrok.io/view")</value>
                    </set-header>
                </return-response>
            </when>
        </choose>
    </inbound>

Upvotes: 1

Related Questions