Swagger UI - 有效响应中的"TypeError:无法获取"

Question

我刚刚从Git repo(3.0.19)中删除了最新的Swagger:https://github.com/swagger-api/swagger-ui.git并更新了我的API以使用新版本.

跑来git describe --tags确认,我的版本目前是:v3.0.19-6-gaab1403

我遇到的问题是这里描述的问题,我的响应是403(我可以在浏览器的检查器中看到这个),虽然我有错误403的响应,但我仍然收到TypeError: Failed to fetch消息.

这是我对403响应的定义的片段:

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

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

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

更新:我已经测试了401响应,响应相同.

并且400正在按预期工作:

Answer 1

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

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

Answer 2

对于任何遇到这个问题的人;

经过一天的故障排除和Swagger支持人员指出我正确的方向后,事实证明这是由AWS API Gateway自定义授权人员中的错误引起的.

我们目前正在使用AWS API Gateway来管理我们的API,这包括通过自定义授权器管理我们的所有授权.问题是自定义授权程序当前不支持在响应中传递标头,并且Swagger UI需要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 3

因为跨域问题是指你的网站托管在本地或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 4

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

我使用指向http：// localhost：9090 /的openapi规范设置了连接。开发服务器启动时，显示“正在http://0.0.0.0:9090/上运行”。该页面似乎正常工作，但是swagger ui使用openapi规范中的http：// localhost：9090 /进行后续请求并显示结果。浏览器控制台显示。提供的命令运行良好；尽管最初令人困惑，但是curl成功表明了问题的根源是浏览器阻塞，而不是服务器端故障。TypeError: Failed to fetchAccess to fetch at 'http://localhost:9090/vr/variation' from origin 'http://0.0.0.0:9090'curl

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

Answer 5

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

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

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

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

参考在 ASP.NET Core 中启用跨域请求 (CORS)

Answer 6

请检查提供给 swagger jsdoc 的 swaggerOptions 并检查主机和基本名称是否正确。我以前遇到过同样的问题，并通过纠正这个问题解决了这个问题。希望这也能解决问题。

例如：

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"]
};