Express.js, Typescriptでウェブサーバーを作成

概要
導入
全体

概要

cors

Cross-Origin Resource Sharingの略

corsエラー

CORSエラーは、ブラウザがあるオリジンから別のオリジンへのリクエストをブロックしたときに発生します。これは、セキュリティの一環として実装されているものです。悪意のあるウェブサイトがユーザーの知らないうちに別のサイトにリクエストを送ったりしての攻撃を防ぐためです。

corsエラー対策

オリジナルのみで完結できるウェブサービスは難しいの特定のオリジナルのみ許可するなどで目的に合ったサービスを複数のオリジナルで実現します。

Access-Control-Allow-Origin: このヘッダは、リソースにアクセスできるオリジンを指定します。特定のオリジンだけを許可したり、*を使用してすべてのオリジンを許可したりできますが、後者の使用はセキュリティ上のリスクを伴う場合があるため注意が必要です。
Access-Control-Allow-Methods: このヘッダは、許可されているHTTPメソッド（GET、POSTなど）を指定します。
Access-Control-Allow-Headers: このヘッダは、リクエスト中に使用できるHTTPヘッダを指定します。

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization

全てのオリジナルを許可する場合、お勧めしないが開発など必要に応じて利用する

Access-Control-Allow-Origin: *

導入

$ npm install cors
$ npm install -D @types/cors

特定のオリジンと特定のAPIメソッドのみ許可のcorsを設定する

const options: CorsOptions = {
  origin: ['url'],
  method: ['GET'],
  allowedHeaders: [ 'Authorization', 'Content-Type' ]
};

使用します。

app.use(cors(corsOptions));

全体

index.ts

import cors, { CorsOptions } from 'cors';
import express from 'express';
import dotenv from 'dotenv';
import { router } from './router';

dotenv.config();

const app = express();
const port = process.env.PORT || 3000;

const corsOptions: CorsOptions = {
  origin: ['http://localhost:3000'],
  methods: [ 'GET', 'POST', 'PUT', 'DELET' ],
  allowedHeaders: [ 'Content-Type', 'X-Requested-With',  'Authorization' ],
}

app.use(cors(corsOptions));

// ミドルウェア設定
app.use(express.json());

// 
app.use('/users',router);

app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
});