フロントエンド(Angular)とバックエンドの繋ぎこみを行なった時にcorsエラーが表示され、それに対応した流れを書いていこうと思います。
####エラーの内容
core.js:6498 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost:3000/some","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:3000/some: 0 Unknown Error","error":{"isTrusted":true}}
at resolvePromise (zone.js:1213:1)
at resolvePromise (zone.js:1167:1)
at zone.js:1279:1
at ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.js:28679:1)
at ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at drainMicroTaskQueue (zone.js:582:1)
at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
at invokeTask (zone.js:1600:1)
フロントエンドは
localhost:4200
で起動
バックエンドは
localhost:3000
で起動しています。
したがってお互いのポートが異なるためにcorsエラーを引き起こしています。
####やったこと
node.js側でcorsのライブラリを入れました。
app.ts
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors());
これにより、フロントエンド側でのcorsエラーを解消することができました。
corsのライブラリについての説明があったので下記にリンクを記載します。
express.jsのcors対応