swagger ui not generating requested correctly when using free-form x-www-form-urlencoded form data and examples

[KyleThen]

Q&A (please complete the following information)

• OS: Windows
• Browser: Chrome
• Version: 97
• Method of installation: springdoc
• Swagger-UI version: [e.g. 3.10.0]
• Swagger/OpenAPI version: openapi 3.0.1

Content & configuration

Using the below definition, try to use one of the examples to send a request with the application/x-www-form-urlencoded type (grant_type=authorization_code&code=xxxxxxxxxx&client_id=xxxxxxxxxx) and see the request that is generating is separating out each individual character into a separate param in the body.

Example Swagger/OpenAPI definition:

openapi: 3.0.1
info:
  title: Test API
  description: Testing
  version: "1.0"
servers:
  - url: http://localhost:8080
    description: Generated server url
security:
  - api: []
paths:
  /v1/token:
    post:
      tags:
        - token-controller
      description: Oauth 2 Access Token.
      operationId: getOauthAccessToken
      requestBody:
        content:
          application/x-www-form-urlencoded:
            schema:
              type: object
            examples:
              authorization_code grant type:
                description: authorization_code grant type
                value: grant_type=authorization_code&code=xxxxxxxxxx&client_id=xxxxxxxxxx
              client_credentials grant type:
                description: client_credentials grant type
                value: grant_type=client_credentials&client_id=xxxxxxxxxx&client_secret=xxxxxxxxxx
              refresh_token grant type:
                description: refresh_token grant type
                value: grant_type=refresh_token&refresh_token=xxxxxxxxxx
      responses:
        '200':
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/OauthAccessTokenResponseView_V1'
components:
  schemas:
    OauthAccessTokenResponseView_V1:
      type: object
      properties:
        scope:
          type: string
        access_token:
          type: string
        refresh_token:
          type: string
        token_type:
          type: string
        expires_in:
          type: integer
          format: int64
      description: 'The Oauth 2 Access Token response: https://www.oauth.com/oauth2-servers/access-tokens/access-token-response/'
  securitySchemes:
    api:
      type: http
      scheme: bearer

Describe the bug you're encountering

When entering in free-form form data, the request ends up being the below, note the body that is built.

curl -X 'POST' \
  'http://localhost:8080/v1/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d '0=g&1=r&2=a&3=n&4=t&5=_&6=t&7=y&8=p&9=e&10=%3D&11=a&12=u&13=t&14=h&15=o&16=r&17=i&18=z&19=a&20=t&21=i&22=o&23=n&24=_&25=c&26=o&27=d&28=e&29=%26&30=c&31=o&32=d&33=e&34=%3D&35=x&36=x&37=x&38=x&39=x&40=x&41=x&42=x&43=x&44=x&45=%26&46=c&47=l&48=i&49=e&50=n&51=t&52=_&53=i&54=d&55=%3D&56=x&57=x&58=x&59=x&60=x&61=x&62=x&63=x&64=x&65=x'

To reproduce...

Steps to reproduce the behavior:

1. Go to https://editor.swagger.io/ and use the above YAML definition.
2. Click on the token controller endpoint, and attempt to submit one of the example form data values.
3. Observe the curl request body

Expected behavior

Request body should not be split apart into separate characters, should look like:"

curl -X 'POST' \
  'http://localhost:8080/v1/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d 'grant_type=authorization_code&code=xxxxxxxxxx&client_id=xxxxxxxxxx'

According to the open api documentation, free form form data should work with just type object.

[williamhaw]

this is happening for me on Swagger-UI v4.5.0 as well.

[MarcAlx]

The problem you are facing could be fixed by defining a schemas for your form input :

FormInput:
  type: object
  properties:
    grant_type:
      type: string
     refresh_token:
      type: string

And to use it as your request body :

requestBody:
  content:
    application/x-www-form-urlencoded:
  schema:
    $ref: '#/components/schemas/FormInput'

This way it produces the following curl:

curl -X 'POST' \
  'http://localhost:8080/v1/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d 'grant_type=&refresh_token='

I think just setting type: object is too wide, your form input should by restricted by the use of oneOf combined with schemas objects for each of your usecase (authorization_code grant type, client_credentials grant type and refresh_token grant type).

[rstraszewski]

We have the same problem, using "oneOf" doesn't help. What interesting, on much older version of swagger ui (3.32.5) everything is working fine (multiple examples and application/x-www-form-urlencoded).

[anrikun]

I'm also facing this bug.

[char0n]

Addressed in swagger-api/swagger-js#3476