Как добавить пользовательское поле в swagger ui в приложение django?

При каждом запросе конечной точке api требуется заголовок 'VENDOR'. Мне нужно создать поле в Django swagger ui для добавления значения VENDOR и прикрепить его к заголовкам в каждом запросе.

Я пытался настроить параметры swagger в настройках Django, но это не помогло

Мне нужно что-то похожее на то, что изображено на картинке, но оно должно быть продавцом в поле и добавлять к нему запрос

ссылка на изображение

Расширьте swagger-ui.html, создав файл внутри templates/spectacular/swagger-ui.html

здесь я добавил поле под названием vendor и добавил его в заголовки в каждом запросе.

<!DOCTYPE html>
<html lang="eng">
  <head>
    <title>API Documentation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="{{ swagger_ui_css }}" />
    <style>
      html {
        box-sizing: border-box;
        overflow-y: scroll;
      }

      *,
      *:after,
      *:before {
        box-sizing: inherit;
      }

      body {
        background: #fafafa;
        margin: 0;
        padding: 20px;
      }

      .vendor-input {
        margin-bottom: 10px;
        display: none;
      }

      .swagger-ui .topbar {
        display: none;
        /* Hide the default top bar */
      }
    </style>
  </head>
  <body>
    <div id="swagger-ui"></div>
    <!-- Vendor input field placed after the API title and description -->
    <div class="vendor-input">
      <label for="vendor">Vendor:</label>
      <input type="text" id="vendor" name="vendor" />
    </div>
    <script src="{{ swagger_ui_bundle }}"></script>
    <script src="{{ swagger_ui_standalone }}"></script>
    <script>
      window.onload = function() {
        const vendorInputDiv = document.querySelector('.vendor-input');
        const ui = SwaggerUIBundle({
          url: "/api/schema/",
          dom_id: '#swagger-ui',
          presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
          ],
          layout: "StandaloneLayout",
          onComplete: function() {
            // Move the vendor input field after the API title and description
            const info = document.querySelector('.swagger-ui .info');
            if (info) {
              info.appendChild(vendorInputDiv);
              vendorInputDiv.style.display = 'block';
            }
          },
          requestInterceptor: function(request) {
            const vendor = document.getElementById('vendor').value || 'test.com';
            if (vendor) {
              request.headers['VENDOR-SITE'] = vendor;
              request.headers['X-CSRFToken'] = "{{csrf_token }}"
            }
            return request;
          }
        });
        window.ui = ui;
      };
    </script>
  </body>
</html>

Вернуться на верх