cors 문제 해결하고 쿠키요청

cors 문제가 생기는 이유:
3000번 포트에서 post 및 get 요청을 보내다가 갑자기 다른 포트로 req 요청시 cors 에러가 난다.

브라우저가 동시에 다른 포트에서 정보받는 것을 차단하여 생기는 일이므로 요청받는 back에게 req하는 프론트가 승인되었음을 알리면 에러가 해결된다.

또한 origin이 다른 http 통신에서는 request header에 쿠키가 자동으로 들어가지 않습니다. 우리가 설정을 해줍니다. request header에 쿠키가 없으면 "서버는 내가(클라이언트)가 누군지 모르겠죠? " 그렇기 때문에 우리가 직접 쿠키를 넣어주어여 합니다.

const express = require('express');
const app = express();

app.get('/', (req, res)=>{
    res.setHeader('Set-Cookie', 'token=true2');
    res.send("this is 5000");
})


app.listen(5000, ()=>{
    console.log("port 5000 (back) running");
})

express를 통해 요청을 서버에 보낸다.
포트는 5000에 열어놨고 setHeader란 헤더에 쿠키값을 설정한다는 뜻이다.

확인해보면 token = true2 가 잘 들어와있다.
localhost:5000으로 요청했을 때 응답 헤더에 우리가 세팅한 값이 들어온 것을 확인할 수 있다.

이제 프론트(다른포트)를 세팅하겠다.

const express = require('express'); //미들웨어
const app = express();
const nunjucks = require('nunjucks');
app.set('view engine', 'html'); //app.set

nunjucks.configure('views', {
    express:app
})

app.get('/', (req, res)=>{
    res.render('index');
})

app.listen(5555, ()=>{
    console.log("front server is on 5555");
})

그리고 front에 띄울 html은 다음과 같다.

<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        function init() {
            axios.post("http://localhost:5000/getCookie", null, {
                withCredentials:'true'
            })
            console.log('5000에 요청한다');
        }
        init();

axios를 통해 5000/getCookcie에 요청한다.
withCredentials를 쓰는 이유: 다른 http가 요청시 쿠키값은 자동으로 응답에 포함되지 않기때문에 쿠키값 받기위해 true 설정

이때 프론트에서 쿠키값을 포함하였다면 백에서도 쿠키값을 허용하기 위해 추가 코딩을 해야한다.

app.post('/getCookie', (req, res)=>{
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5555');
    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS, GET');
    res.setHeader('Access-Control-Allow-Credentials', 'true'); // 쿠키도 공유
    res.setHeader('Access-Control-Allow-Headers', 'Context-type');
    res.setHeader('Set-Cookie','token=true');
    res.send('cookie 보자');
})

백에서 프론트의 요청을 받아주기위한 코딩
origin 5555의 요청을 받아준다.
메소드 허용 => 포스트, 겟
3번째 줄은 쿠키값 허용
4번째줄 헤더 타입이 context-type
5번째 줄은 여기서 토큰 값 설정
6번째 줄은 응답송출

요청 url에 보면 5000/getCookie로 잘 요청하였고 응답헤더에 보면 마찬가지로 Set-Cookie: token=true2 잘 들어와있다.
이후 쿠키를 확인해보면 5000url 요청으로 생긴 쿠키값일 수도 있으니 지웠다가 다시 5555를 요청해봐도 쿠키에 잘 찍히는 것을 확인할수 있다.
5555에서 요청해도 쿠키값이 찍히는 이유 : axios.post('5000/getCookie')로 값을 요청하고 다른 http이지만 withCredentials 설정 true 줬기 때문임.

https://github.com/jungtaesu/GitPortFolio/tree/DEV/javascript/0418/javascript-programming/corserror2
소스파일