[서버 배포] CORS, axios

CORS

1. CORS 개념

• CORS(교차 출처 리소스 공유)란, 다른 출처에서 리소스 요청 시 접근 권한을 부여하는 메커니즘이다.
  여기에서 출처란 프로토콜, 호스트명, 포트를 말한다. 이 중 하나라도 다르면 다른 출처로 인식한다.

• 예를 들어 네이버 API 서버에서 데이터를 요청한다고 해보자. 그러면 API 서버 -> 웹 서버 -> 브라우저와 같은 단계보다는 API 서버 -> 브라우저와 같은 심플한 단계였으면 좋겠다는 생각이 들 것이다.
  하지만 기존 브라우저 보안 정책에 의해 도메인이 다른 네이버 API와 다이렉트로 통신이 불가할 것이다.

• 이를 해결하기 위해 개발자들은 JSONP라는 우회적인 방법을 사용하기도 했다. 하지만 이 방법은 보안 정책을 무력화하기 때문에 브라우저 입장에서도 위험하다고 판단할 것이다.

• 결국 브라우저에서 우회하지 않아도 사용할 수 있는 공식적인 루트를 제공하였으니, 바로 CORS이다.

참고
https://velog.io/@nemo/cors

###Axios

1. Axios 라이브러리 깔기

 npm i axios --save

2. Axios로 api 서버 들고오기

• api를 사용할 폴더에 useEffect와 axios 가져오기

import { useState, useEffect } from 'react'
import axios from 'axios'

• useEffect 내부에 axios 사용하기

  useEffect(() => {
    axios
      .get('/api/test')
      .then((response) => {
        // 성공 핸들링
        alert('요청 성공')
      })
      .catch((error) => {
        // 에러 핸들링
        alert('요청 실패')
        console.log(error)
      })
  }, [])

• server index.js 폴더에 요청에 대한 응답 내용을 보내주기

// list 파일에서 요청을 받아 오기
app.post('/api/test', (req, res) => {
  // 어떠한 요청이 왔는지 확인
  console.log(req)
  // status 코드를 200번으로 보내주고, Json 파일로 true인 것을 보내준다.
  res.status(200).json({ success: true })
})

proxy 설정하기

• proxy 관련 내용 src폴더에 setupProxy.js를 만들어 붙여넣어주기
  https://create-react-app.dev/docs/proxying-api-requests-in-development/

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

• http-proxy-middleware 설치

npm i http-proxy-middleware --save

• index.js 전체 순서 설정 및 응답시 내용 기입

const express = require('express')
// Path 라이브러리 사용
const app = express()
const port = 5000

const mongoose = require('mongoose')
const path = require('path')


app.use(express.static(path.join(__dirname, '../PostSite/build')))

// list 파일에서 요청을 받아 오기
app.post('/api/test', function (req, res) {
  res.send('hello from a')
})
app.get('/api/test', (req, res) => {
  // 어떠한 요청이 왔는지 확인
  console.log(req)
  // status 코드를 200번으로 보내주고, Json 파일로 true인 것을 보내준다.
  res.status(200).json({ success: true })
})



app.get('/', (req, res) => {
  // path라이브러리로 현재 경로와 상대 경로 join
  res.sendFile(path.join(__dirname, '../PostSite/build/index.html'))
})

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../PostSite/build/index.html'))
})


// 서버를 열고, 내주소로 변경
app.listen(port, () => {
  mongoose
    .connect(
      'mongodb+srv://jejupalette:an638702!!@cluster0.oqkmdgl.mongodb.net/?retryWrites=true&w=majority'
    )
    // 실행이 잘 되었을 때
    .then(() => {
      console.log(`Example app listening on port http://localhost:${port}`)
      console.log('Connecting MongoDB...')
    })
    // 실행이 잘 안되었을 때
    .catch((err) => {
      console.log(`${err}`)
    })
  console.log('hello')
})

• proxy 파일의 위치를 component안이 아니 src로 설정해줘야함!