JavaScript) axios 헤더 설정, CORS 설정

axios

브라우저, node.js에서 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
-> 서버와 클라이언트의 통신을 위해 사용

CORS

Cross Origin Resource Sharing (다른출처 리소스 공유)
웹이 고도화 됨에 따라 여러 곳의 리소스를 사용하기 위해 사용
기본적으로는 막혀있기 때문에 따로 설정을 해줘야 한다
-> 클라이언트의 요청 헤더와 서버의 cors 설정

axios 설치

npm install axios

yarn add axios

CORS 설치

npm install cors

yarn add cors

axios 사용 및 헤더 설정

// 클라이언트

import axios from 'axios';


axios('server url', {          
    method: 'GET',       // or 'POST'
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '요청을 보낼 url',  // cors origin (서버의 cors 설정이 동일해야 응답)
        'Access-Control-Allow-Creadentials': true    // 쿠키를 요청에 포함 (cors 설정도 동일해야 가능)
    }
})
.then(responese => {
    if(response.status === 200){

    }
 })

// 서버

import cors from 'cors';

const corsOptions = {
  origin: `https://localhost:3000`,        // 요청을 보낼 수 있는 url, 배열로 입력 가능
  credentials: true,                    // 쿠키를 승인하는 설정
  methods: ['GET', 'POST', 'OPTIONS'],  // OPTIONS가 headers를 확인하는 요청에 대한 처리
}
app.use(cors(corsOptions));