day05

왜 API를 브라우저에서 요청하면 실패할까?

CORS(cross origin resource sharing)

각각의 프론트엔드와 백엔드 db컴퓨터가 있다고 치면
쿠팡->쿠팡 ok
지마켓-> 지마켓 failed
서로 다른 곳에서 통신을 한다고 하면 크롬 브라우저에서 차단.

cors정책 때문!

cross origin resource sharing
백엔드에서 cors옵션을 설정할 수 있는데 이를 통해 어떠한 데이터를 다른 브라우저에서 사용이 가능해진다. 모든 사이트로 적용 가능하다.

모바일 앱에서 요청을 하면 cors정책에서 안 막음
브라우저만 차단!

cors를 해결해보자
우선

yarn add cors

명령어를 통해 cors라이브러리를 npm에서 다운받는다.

import express from 'express'
import cors from 'cors'
conste app = express()
 
app.use(cors())//cors안에 인자를 넣을 수 있는데 아무값도 넣지 않으면 모든 브라우저의 접속을 허락한다는 것이다. 이는 지양하자.
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})