web-dev-qa-db-ja.com

Swagger UI-有効な応答で「TypeError:取得に失敗しました」

https://github.com/swagger-api/swagger-ui.git を使用して、Gitリポジトリ(3.0.19)から最新のSwaggerをプルダウンし、使用するAPIを更新しました新しいバージョン。

ランgit describe --tags確認のため、現在私のバージョンはv3.0.19-6-gaab1403

私が抱えている問題は、説明されているものです ここ 、それにより私の応答は403です(ブラウザのインス​​ペクタでこれを見ることができます)、エラー403に対する応答がありますが、まだTypeError: Failed to fetchメッセージ。

enter image description here

enter image description here

403応答に関する私の定義からの抜粋を以下に示します。

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

here が報告されていることに気づきましたが、エンドポイントをテストし、有効な情報で呼び出された場合はエンドポイントと同様に、OPTIONSが正しい値を返すため、CORSの問題ではないことがわかります403)。

誰かが私を正しい方向に向けることができますか?

更新:それ以来、同じ応答で401応答でテストしました。

enter image description here

そして、400が期待どおりに機能していること:

enter image description here

12
Hexie

この問題に遭遇した人には;

トラブルシューティングの1日とSwaggerサポート担当者が私を正しい方向に向けた後、これは現在、AWS API Gatewayカスタムオーソライザー内のバグが原因であることがわかりました。

現在、APIの管理にAWS API Gatewayを使用しています。これには、カスタム認証を介したすべての認証の管理が含まれます。問題は、カスタムオーソライザーが現在、応答内のヘッダーの通過をサポートしておらず、Swagger UIにAccess-Control-Allow-Origin:*応答ヘッダー内で、正しいHTTPステータスコードを表示します。

問題に関するこのAWSスレッドを参照してください(1年以上前):

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

同じものに関するUIの議論を入れ替える: https://github.com/swagger-api/swagger-ui/issues/34

編集/更新

これは、ゲートウェイ応答を使用することで解決されました。これと同じフォーラム(ページ2)を参照してください。

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

10
Hexie

ローカル開発中にこのエラーが発生しました(つまり、AWSとは何の関係もありませんでした)。根本的な原因(CORS違反)は同じです。以下は、この問題に遭遇した他の人を助けるかもしれません。

connexionhttp:// localhost:9090 / を参照するopenapi仕様でセットアップします。開発サーバーが起動すると、「 http://0.0.0.0:9090/ で実行中」と表示されます。そのページは機能しているように見えますが、swagger uiは後続のリクエストにopenapi仕様の 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コマンドは正常に機能しました。最初は混乱しますが、カールの成功は、問題がサーバー側の障害ではなく、ブラウザーのブロックによるものであるという手がかりです。

(接続はPython flaskに基づいており、openapi統合の拡張サポートを提供します。)

5
Reece

クロスオリジンの問題は、Webサイトがローカルまたはポート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

1
Chandan Gupta

免責事項:-この回答は、Asp.net Coreを使用して開発されたAPI用です

Swagger UIエディターからAPIにアクセスしようとすると、同様の問題に直面しました。 Swagger UIエディターがApacheでホストされているAsp.net Coreを使用して開発されたAPIにアクセスしようとしていました。 CORS(Cross Orgin Request)に直面していました。

次のコードを使用してCORSリクエストを許可するには、APIコードを変更する必要があります。-クラス「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);
            });
            });
        }

Configureメソッド内にコード行を追加しました。

 app.UseCors(MyAllowSpecificOrigins);

参照 ASP.NET Coreでクロスオリジンリクエスト(CORS)を有効にする

1
hellowahab