Try-it-out feature in the developer portal

When you create a frontend application for your developer portal, users can review a catalog of your API products. This catalog includes the OpenAPI docs, which might include a Try it out feature, such as in the Swagger UI of the following figure.

Figure: Screenshot of a Tracks OpenAPI doc with a Try it out button

What's happening

The Try it out feature does not work. The test request returns no response, even when properly formatted.

Why it's happening

Your portal configuration or OpenAPI spec might be incorrect. Additionally, you might have policies or other network security rules that prevent the feature from working.

How to fix it

  1. Debug your Portal server.
  2. Make sure that you set up the frontend application for the developer portal correctly. Common errors include the following:
    • Selecting the wrong or an incorrectly configured route table for your API products.
    • Incorrect OpenAPI spec in the ApiDoc resource for your APIs.
    • An error in the external authentication setup for users to access the portal. For example, you might need to configure the OIDC provider with certain settings for the frontend app.
  3. In the ApiDoc for your API, check that the full URL for your OpenAPI spec is correct. For example, you might need to replace a hostname api.example.com with the full path and port, such as http://api.example.com:31080.
  4. You might need to apply a CORS policy to allow certain headers and origins, such as localhost. The following example uses the Tracks API product that you configured in the Portal guide. Replace the $PORTAL_URL with the host in the route table that you use to expose the gloo-mesh-portal-server.
    kubectl apply -f - << EOF
    apiVersion: security.policy.gloo.solo.io/v2
    kind: CORSPolicy
    metadata:
      name: dev-portal-cors
      namespace: gloo-mesh-gateways
    spec:
      applyToRoutes:
        - route:
            labels:
              api: tracks
              useagePlans: dev-portal
      config:
        allowCredentials: true
        allowHeaders:
          - "Content-Type"
          - "api-key"
        allowMethods:
          - GET
          - POST
          - DELETE
          - PUT
          - OPTIONS
        allowOrigins:
          - prefix: http://localhost
          - prefix: http://127.0.0.1
          - prefix: $PORTAL_URL
    EOF