Swagger UI - " TypeError: Failed to fetch" on valid response

Question

我刚刚从 Git 存储库 (3.0.19) 中下载了最新的 Swagger，使用：https://github.com/swagger-api/swagger-ui.git 并更新了我的 API 以使用新版本。

运行 git describe --tags 确认，我的版本目前是：v3.0.19-6-gaab1403

我遇到的问题是 here 所描述的，因此我的响应是 403（我可以在浏览器的检查器中看到这个），尽管我对错误 403 有响应，但我仍然收到 TypeError: Failed to fetch 消息。

这是我对 403 响应的定义中的一个片段：

                    "403": {
                    "description": "Forbidden",
                    "headers": {
                        "Access-Control-Allow-Origin": {
                            "type": "string"
                        }
                    }
                },

我也注意到它报告 here 但是，我知道这不是 CORS 问题，因为我已经测试了端点并且 OPTIONS 返回正确，如果使用有效信息调用端点也是如此（我强制这个 403).

有人能给我指出正确的方向吗？

更新： 我已经在 401 响应上进行了测试，响应相同。

并且 400 按预期工作：

Answer 1

对于遇到此问题的任何人；

经过一天的故障排除和 Swagger 支持人员为我指明了正确的方向，事实证明这是目前由 AWS API 网关自定义授权方中的错误引起的。

我们目前正在使用 AWS API 网关来管理我们的 API，这包括通过自定义授权方管理我们的所有授权。问题是自定义授权方目前不支持在响应中传递 headers，而 Swagger UI 需要响应 header(s) 中的 Access-Control-Allow-Origin:* 来显示正确的HTTP 状态代码。

查看有关此问题的 AWS 线程（已经超过一年）：

https://forums.aws.amazon.com/thread.jspa?messageID=728839

Swagger UI 讨论相同：https://github.com/swagger-api/swagger-ui/issues/3403

编辑/更新

此问题已通过使用网关响应得到解决。查看同一论坛（第 2 页）：

https://forums.aws.amazon.com/thread.jspa?messageID=728839

Answer 2

因为跨域问题是指你的网站托管在本地或者8000端口或者其他端口，而你的swagger的端口号不一样，所以这个问题是真实的。我们可以通过授予权限来修复它。

节点代码如下：

app.use( (request, response, next) => {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

我们也可以使用CORS npm来解决。 https://www.npmjs.com/package/cors

Answer 3

我在本地开发时遇到了这个错误（即与 AWS 无关）。根本原因（违反 CORS）是相同的。以下内容可能会对遇到此问题的其他人有所帮助。

我根据 openapi 规范为后续请求设置 connexion with an openapi spec that referred to http://localhost:9090/. When the development server starts, it says "Running on http://0.0.0.0:9090/". That page appears to work, but the swagger ui uses http://localhost:9090/，并在结果中显示 TypeError: Failed to fetch。浏览器控制台显示 Access to fetch at 'http://localhost:9090/vr/variation' from origin 'http://0.0.0.0:9090'。提供的 curl 命令运行良好；虽然最初令人困惑，但 curl 成功表明问题是由于浏览器阻塞而不是服务器端故障引起的。

（Connexion 基于 Python flask 并提供对 openapi 集成的扩展支持。）

Answer 4

免责声明：- 此答案适用于使用 Asp.net Core

开发的 API

我在尝试从 Swagger UI 编辑器访问 API 时遇到了类似的问题。我试图访问一些使用 Asp.net 核心开发的 API，其中 Swagger UI 编辑器托管在 Apache 上。我正面临 CORS（跨源请求）。

我必须修改我的 API 代码以允许使用以下代码的 CORS 请求：- 在 Startup.cs 文件中声明 class "StartupShutdownHandler"

private readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

在 ConfigureServices 方法中添加了一段代码。

var str = ConfigurationHandler.GetSection<string>(StringConstants.AppSettingsKeys.CORSWhitelistedURL);
        if (!string.IsNullOrEmpty(str))
        {
            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins(str);
            });
            });
        }

在配置方法中添加了一行代码。

 app.UseCors(MyAllowSpecificOrigins);

引用Enable Cross-Origin Requests (CORS) in ASP.NET Core

Answer 5

请检查提供给swagger jsdoc的swaggerOptions，并检查host和base name是否正确。我之前遇到过同样的问题，并通过更正此问题来解决问题。希望这也能解决问题。

例如：

const options = {
  swagger: "2.0",
  swaggerDefinition: {
    // options.swaggerDefinition could be also options.definition
    info: {
      title: "Customer API", // Title (required)
      description: "Dummy Customer API for implementing swagger",
      contact: {
        name: "Stack Overflow"
      },
      version: "1.0.0" // Version (required)
    },
    host: "localhost:5000",
    basePath: "/"
  },
  // Path to the API docs
  apis: ["SwaggerImplementation/index.js"] // For complex api's pass something like apis: ["./routes/*.js"]
};

Answer 6

这是因为有时您的 IIS Binding 的 HTTPS SSL 证书会自动转到 Not Selected。所以你再次提出了一个类似的问题，但很少有好的答案请参考此 link 手动 select 将 SSL 证书获取到 1 IIS Express 开发证书 1。下面我提到了如何做答案：

打开 IIS 单击默认网站。在右上角你会看到一些设置点击“Bindings”，你会得到一个Site Binding window。然后您将获得 http 和 https 详细信息。在那里单击“https”并单击编辑，然后您将获得另一个 window 编辑站点绑定。在 window 检查 SSL 证书。 If SSL Certificate = Not Selected select IIS Express 开发证书。然后停止并启动 IIS。问题将得到解决。

Answer 7

我在尝试验证访问 OAuth2 安全 Rest API 集时遇到了同样的错误。 API 服务器部署在 VM 上并使用 IPSEC VPN 连接到它。实际上，HTTP header 中的 username/password 与基本身份验证是使用单独的 API 发送的，而不是 /oauth/token，后端本身正在调用 http://localhost:8080/api/v0/oauth/token 和客户端密码并将令牌返回给客户。将 localhost 更改为服务器的实际本地 IP 后，问题就消失了。

Answer 8

此错误在 swagger 方面很常见，可能由许多可能的原因造成。就我而言，这是由于连接错误。由于我这边的连接问题，我的 swagger 页面没有响应。我不得不刷新一次并为我工作。

Answer 9

每个解决方案都一定是正确的:) 但就我而言，我的 webconfig 文件中有该行

 <environmentVariable name="ASPNETCORE_HTTPS_PORT" value="5001" />

我只是将 ASPNETCORE_HTTPS_PORT 替换为 ASPNETCORE_HTTP_PORT，错误消失了:)。所以最后一行是

  <environmentVariable name="ASPNETCORE_HTTP_PORT" value="5001" />

将 5001 替换为您的端口。

Answer 10

我遇到了同样的问题，并且有一个非常简单的修复方法。我使用 HTTP 访问我的网站，但它需要 HTTPS。调用端点时，我的站点重定向到 HTTPS。

这违反了“同源政策”： https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

Answer 11

如果是 .NET Core API，请尝试在 StartUp.cs 中注释掉以下方法调用如下图，

// app.UseHttpsRedirection();

Answer 12

以下文章可能会有所帮助。当我从 Swagger ui 调用 API 网关时，我遇到了同样的问题，后者使用代理集成进一步调用 Lambda 函数（从 lambda 传递响应 headers）。就我而言，我错过了在 Spring 启动应用程序 lambda 处理程序 response-event object APIGatewayProxyResponseEvent 中设置响应 headers Access-Control-Allow-Origin。在处理程序 class 中设置此 header 后，Swagger UI 能够调用 api 网关。看 https://fanchenbao.medium.com/thanks-for-the-article-it-is-a-great-way-to-get-started-with-deploying-swagger-ui-on-s3-7990c7b48851

Swagger UI - " TypeError: Failed to fetch" on valid response

Swagger UI - " TypeError: Failed to fetch" on valid response

swagger

swagger-ui

swagger-2.0