javascript - 使用 Swagger UI 时添加标题

Question

我的 swagger.json 文件 (localhost:8000/rest/swagger.json) 的端点需要 AuthType header 才能访问它.当它对 swagger.json 文件发出初始请求时，如何让 Swagger UI 添加它？

---

到目前为止我尝试了什么:

$(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 开发工具并查看对 localhost:8000/rest/swagger.json 发出的请求时，它没有 AuthType header 并且有一个 401 Unauthorized 响应。

注意:onComplete 函数似乎从未被调用过(我猜它请求 swagger.json 之前通常会被调用，所以它落下了当请求失败时进入 onFailure block )

Answer 1

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

我的用例是我必须调用我的 API 来获取 JSON 响应。(我的 API 受 login_required 装饰器保护，它需要 xcsrf-token 在标题中发送 )

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

如何解决这个问题？

1. 当我们SwaggerUIBundle时。名为"spec" 的键(将在稍后的代码段中解释spec)必须映射到JSON 响应 值。此 JSON 响应 为 swagger-ui 页面提供初始结构。

你在说什么？你在说什么样的用户界面？ JSON Response 的结构是什么？

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

1. 使用 AJAX 请求调用您的 API 或localhost:8000/rest/swagger.json.

2. 现在在您的成功通话中，JSON 必须等同于“spec”。

使用代码片段的解释

1. 实例化 SwaggerUIBundle 对象。请注意必须映射到 JSON 响应 值的 spec 键。 dom_id 可以是任何 div 的 ID。

  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

1. 现在将这个对象实例化包含在一个函数中。

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
}

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

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');
  
}

1. 这是最后的片段。

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');
  
}