使用 Swagger UI 时添加 A Header

Question

我的 swagger.json 文件 (localhost:8000/rest/swagger.json) 的端点需要 AuthType header 才能访问它。我怎样才能让 Swagger UI 在初始请求 swagger.json 文件时添加它？

到目前为止我尝试过的：

$(function () {
    var token = 'xxx';
    window.swaggerUi = new SwaggerUi({
        url: "http://" + location.host + "/rest/swagger.json",
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function (swaggerApi, swaggerUi) {
            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("AuthToken", token, "header");
            window.swaggerUi.api.clientAuthorizations.add("AuthToken", apiKeyAuth);
            $('pre code').each(function (i, e) {
                hljs.highlightBlock(e)
            });
        },
        docExpansion: "none",
        apisSorter: "alpha",
        showRequestHeaders: false
    });

    swaggerUi.load();
});

但是当我打开 Chrome Dev Tools 并查看对 localhost:8000/rest/swagger.json 发出的请求时，它没有 AuthType header 并且有一个 401 Unauthorized响应。

注意：onComplete 函数似乎从未被调用过（我猜它请求 swagger.json 之前通常会被调用，所以它属于 onFailure 在请求失败时阻塞）

Answer 1

在您的示例中，您有 window.swaggerUi，但尚未将 swaggerApi 变量分配给 window 对象。

尝试：

onComplete: function (swaggerApi, swaggerUi) {

    window.swaggerApi = swaggerApi;

    var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("AuthToken", token, "header");
    window.swaggerUi.api.clientAuthorizations.add("AuthToken", apiKeyAuth);
    $('pre code').each(function (i, e) {
        hljs.highlightBlock(e)
    });
}

第二个：

虽然浏览器可能能够计算出正确的 swaggerUi 变量尝试加载：

window.swaggerUi.load();

而不是：

swaggerUi.load();

Answer 2

我会为你提供我的场景。老实说 READ-ME 的 swagger 不符合标准（这是我的观点）。他们没有提到任何有关向 url 请求添加 header 的内容。

我的用例是我必须调用我的 API 以获得 JSON 响应 。（我的 API 受 login_required装饰器，需要在header中发送xcsrf-token)

在你的情况下，你的 localhost:8000/rest/swagger.json 类似于我的 API。

如何解决这个问题？

当我们SwaggerUIBundle.一个名为"spec"的键（会解释spec 后面的片段）必须映射到 JSON response value 。此 JSON 响应 为 swagger-ui 页面提供初始结构。

你在说什么？你说的是哪种 UI ？ JSON 响应的结构是什么？

Click here for Swagger-UI example

要使用 swagger-ui 制作这种类型的页面，您需要为其提供 JSON 响应

Click here for JSON reponse that you need to generate either using APIs or in your case ocalhost:8000/rest/swagger.json

使用 AJAX 请求拨打您的 API 或 localhost:8000/rest/swagger.json.
现在在你的成功调用中，JSON 必须等同于 "spec".

使用代码片段的解释

实例化 SwaggerUIBundle object。注意 spec 键必须映射到 JSON response 值。 dom_id可以是任何div.

  const ui = SwaggerUIBundle({
    spec: {},// put JSON response here.
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      // yay ES6 modules ↘
      Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })
  window.ui = ui

现在将这个 object 实例化包含在一个函数中。

window.foo = function(spec){
  const ui = SwaggerUIBundle({
    spec: spec,
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      // yay ES6 modules ↘
      Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })
  window.ui = ui
}

让我们看看如何使用 ajax 调用来调用此函数。我们可以在此 AJAX 调用期间添加任何令牌。

window.onload = function() {
   function apiCall(uri, data, methodType) {
  const csrftoken = getCookie('csrftoken');
  //Add header to the URL . 
  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!this.crossDomain) {
          xhr.setRequestHeader('X-CSRFToken', csrftoken);
      }
    }
  });
  
  $.ajax({
    url: uri,
    method: methodType,
    contentType: 'application/json',
    data: data,
    success: function (response) {
      var script = document.createElement('script');
      // Calling the function which instantiates swaggerbundle object
      foo(response)
    },
    error: function (error) {
    }
  });
}


// You can write your own getCookie function . 
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = jQuery.trim(cookies[i]);
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
  
  //['GET','POST'] 
  apiCall('http://localhost:8000/rest/swagger.json',{},'GET');
  
}

这是最后的片段。

window.foo = function(spec){
  const ui = SwaggerUIBundle({
    spec: spec,
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      // yay ES6 modules ↘
      Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })
  window.ui = ui
}

window.onload = function() {
   function apiCall(uri, data, methodType) {
  const csrftoken = getCookie('csrftoken');
  //Add header to the URL . 
  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!this.crossDomain) {
          xhr.setRequestHeader('X-CSRFToken', csrftoken);
      }
    }
  });
  
  $.ajax({
    url: uri,
    method: methodType,
    contentType: 'application/json',
    data: data,
    success: function (response) {
      var script = document.createElement('script');
      // Calling the function which instantiates swaggerbundle object
      foo(response)
    },
    error: function (error) {
    }
  });
}


// You can write your own getCookie function . 
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = jQuery.trim(cookies[i]);
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
  
  //['GET','POST'] 
  apiCall('http://localhost:8000/rest/swagger.json',{},'GET');
  
}

使用 Swagger UI 时添加 A Header

Adding A Header when using Swagger UI

javascript

swagger

swagger-ui

如何解决这个问题？

你在说什么？你说的是哪种 UI ？ JSON 响应的结构是什么？

要使用 swagger-ui 制作这种类型的页面，您需要为其提供 JSON 响应

使用代码片段的解释