【Swagger】API実行時にCORSエラーが出る場合の対処法!

当ページのリンクには広告が含まれています。
【Swagger】API実行時にCORSエラーが出る場合の対処法
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

SwaggerでAPIを実行時にCORSエラーが出る場合の対処法が知りたい」とお考えではありませんか?

SwaggerでAPIを実行すると、CORSエラーが発生する場合があります。

いずみ

Swagger Viewerなどを使っている場合はプリフライトリクエストが実行されるので、OPTIONSメソッドが通らないとエラーになります。

めっちゃハマった…

ということで、本記事ではSwaggerでAPI実行時にCORSエラーが出る場合の対処法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

【Swagger】API実行時にCORSエラーが出る場合の対処法

基本的にはサーバ側の設定のみで解決します。

いずみ

普段Laravelを使うので、今回はPHPのコードで解説しますね。

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Log;

class Cors {
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response
          ->header("Access-Control-Allow-Origin" , $_SERVER['HTTP_ORIGIN'])
          ->header("Access-Control-Allow-Methods" , ['POST', 'GET', 'DELETE', 'PUT', 'PATCH', 'OPTIONS'])
          ->header("Access-Control-Allow-Headers" , ['content-type' , 'authorization']);

        return $response;
    }
}

上記のように、サーバ側で「Access-Control-Allow-Origin」を設定すればOKです。

Swaggerはプリフライトリクエストを実行する場合がある

VSCodeのSwagger Viewerなどを使っている場合、API実行時はプリフライトリクエストが実行されます。

つまり、最初にOPTIONメソッドが実行されるので注意しましょう。

いずみ

僕はOPTIONSメソッドが実行されるのを知らなくてハマりました…

Swagger Viewerのポートは「18512」

Swagger Viewerのポートは「18512」です。

なので、CORSでドメインを指定している場合はポート番号に注意しましょう。

いずみ

ポートが「8001」だと思っていたら全然違いました…

ファック!!

まとめ

今回は、SwaggerでAPI実行時にCORSエラーが出る場合の対処法について解説しました。

以下が本記事のまとめになります。

まとめ
  • CORSエラーはサーバ側で設定すればOK。
  • Swaggerはプリフライトリクエストを実行する場合がある。
まとめ♪
いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

【Swagger】API実行時にCORSエラーが出る場合の対処法

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次