LoginSignup
28
22

More than 5 years have passed since last update.

Swaggerで自動生成したnodejs-serverにCORSを許可する方法

Last updated at Posted at 2017-07-06

フロントエンド開発にSwagger Editorから自動生成できるサーバーをローカルで利用しようとしたらCORS制約で通信が出来なかったことがきっかけで記事を書いています。

ローカルでSwagger Editorから自動生成されたAPIサーバーのソースコードに手を加えてCORSを許可する方法を記載しています。
対象サーバーはnodejs-serverです。
※Swagger 2.0仕様でダウンロードしたAPIサーバーです。

パッケージ「cors」をインストール

「cors」というパッケージを導入します。
https://www.npmjs.com/package/cors

npm install cors --save

ソースコードを編集して「cors」を適用する

ダウンロードしたフォルダの「index.js」を編集します。
※ この方法は全てのリクエストを許可する設定です。細かい設定はcorsのドキュメントを参照してください。
https://www.npmjs.com/package/cors


'use strict';

var app = require('connect')();
+ var cors = require('cors');  // ここを追加します。
var http = require('http');
var swaggerTools = require('swagger-tools');
var jsyaml = require('js-yaml');
var fs = require('fs');
var serverPort = 8080;

// swaggerRouter configuration
var options = {
  swaggerUi: '/swagger.json',
  controllers: './controllers',
  useStubs: process.env.NODE_ENV === 'development' ? true : false // Conditionally turn on stubs (mock mode)
};

// The Swagger document (require it, build it programmatically, fetch it from a URL, ...)
var spec = fs.readFileSync('./api/swagger.yaml', 'utf8');
var swaggerDoc = jsyaml.safeLoad(spec);

// Initialize the Swagger middleware
swaggerTools.initializeMiddleware(swaggerDoc, function (middleware) {
+  app.use(cors()); // ここを追加します。

  // Interpret Swagger resources and attach metadata to request - must be first in swagger-tools middleware chain
  app.use(middleware.swaggerMetadata());

  // Validate Swagger requests
  app.use(middleware.swaggerValidator());

  // Route validated requests to appropriate controller
  app.use(middleware.swaggerRouter(options));

  // Serve the Swagger documents and Swagger UI
  app.use(middleware.swaggerUi());

  // Start the server
  http.createServer(app).listen(serverPort, function () {
    console.log('Your server is listening on port %d (http://localhost:%d)', serverPort, serverPort);
    console.log('Swagger-ui is available on http://localhost:%d/docs', serverPort);
  });
});

サーバー起動

後は残りのパッケージをインストールして、通常通りサーバーを起動するのみです。

npm install
npm start
28
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
22