0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

フロントエンドとNode.jsで繋いだ時のCORSエラーについて

Last updated at Posted at 2022-01-16

フロントエンド(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対応

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?