javascript - Swagger 用户界面 : basic auth for swagger file

Question

我的问题是如何在获取 swagger 文件之前将授权 header 添加到我的索引 hmtl 中。我从使用基本身份验证的 http url 获取 swagger 文件。因此，我需要在调用服务之前提供用户名和密码。所以现在我需要知道在哪里添加标题。

$(function () {
      var url = window.location.search.match(/[?]url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "test.json";
      }
      

      hljs.configure({
        highlightSizeThreshold: 5000
      });

      // Pre load translate...
      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }

          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }
        },
        onFailure: function(data) {
          log("Unable to Load SwaggerUI");
        },
        docExpansion: "none",
        jsonEditor: false,
        defaultModelRendering: 'schema',
        showRequestHeaders: false
      });

      window.swaggerUi.load();

      function log() {
        if ('console' in window) {
          console.log.apply(console, arguments);
        }
      }
  });

Answer 1

如果规范位于另一个域，则浏览器将执行飞行前 OPTIONS 请求来确定 CORS。

不幸的是，这是由浏览器自动完成的，因此无法将授权 header 添加到此请求中。唯一的解决方案是将托管规范的服务器配置为不需要对 OPTIONS 请求进行授权。