CORS(Cross-Origin Resource Sharing)

프로젝트와 과제를 진행하면서 "내가 여태 했던 것들을 한번에 보여줄 수 있는 나만의 페이지가 있으면 좋겠다."라는 생각이 들어서 저번에 남은 노트북으로 만들어 두었던 서버에 사이트를 배포를 해보기로 했다.

도메인

먼저, 전에 사용하던 내 도메인 한국에서 도메인을 발급 받았는데 뒤에 붙는 주소가(r-e.kr, kro.kr) 마음에 들지않아 godaddy를 이용하여 .com이 붙은 도메인을 구매하였다.
이미 존재하는 도메인이 아닌 것들은 나쁘지않은 가격으로 이용할 수 있는 것 같다.

nginx를 사용하여 배포하였고, certbot을 사용하여 SSL 인증서를 받을 수 있었다.

nginx란?
강력한 성능과 낮은 메모리 사용량으로 유명한 오픈 소스 웹 서버 소프트 웨어이다. 웹 서버 외에도 리버스 프록시, 로드 밸런서, 메일 프록시 및 HTTP캐시 기능을 제공한다. Nginx는 비동기 이벤트 기반 구조를 사용하여 동시에 많은 연결을 효율적으로 처리할 수 있다.

certbot란?
Let's Encrypt에서 제공하는 무료,오픈 소스 소프트웨어 도구로, 웹사이트의 SSL/TLS 인증서를 자동으로 얻고 설치하는 데 사용된다. 이 도구는 HTTPS를 통한 보안 연결을 쉽게 구현할 수 있게하여, 인터넷의 보안을 향상시키는 데 기여한다.

내 페이지가 인증서를 받은 https로 변경이 되었다.
이제 백엔드를 연결하면 되는데 백엔트 페이지가 http로 되어있으면 https와 연결이 되지않는다고 한다.
백엔드 서버를 하나 더 만들고 인증을 받아주었는데,
node.js에서 https인증을 하기위해서는

option을 설정해주어야되는데
인증을 받은 주소의 privket.pem과 fullchain.pem를 받아와야한다

    key: fs.readFileSync("/etc/letsencrypt/live/하위도메인.soljk.com/privkey.pem"),
    cert: fs.readFileSync(
        "/etc/letsencrypt/live/하위도메인.soljk.com/fullchain.pem"
    ),
};
https.createServer(httpsOptions, app).listen(port, () => {
    console.log(`${port}에서 HTTPS 서버 실행 중`);
});

• key는 TLS/SSL 암호화에 사용되는 비공개 키 파일을 읽어온다
• cert는 서버 인증서와 중간 인증서를 포함한 체인을 읽어온다
• https.createServer(httpsOptions, app)는 httpsOptions에 정의된 인증서 정보와 함께, app을 사용하여 HTTPS서버를 생성한다
• .listen(prot, ...)은 지정된 포트에서 서버를 시작하고, 서버가 실행되면 콘솔에 메시지를 출력한다

CORS란?

Cross-Origin Resource Sharing의 약자로, 다른 출처의 리소스를 공유할 수 있게 하는 웹 보안 메커니즘이다
웹에서는 보안상의 이유로, 기본적으로 스크립트들은 자신과 같은 출처에서만 리소스를 불러올 수 있다. 이 규칙을 동일 출처 정책(Same-Origin Policy)라고 한다.
CORS는 동일 출처 정책의 제약을 넘어 다른 출처의 리소스에 접근할 수 있도록 허용한다
웹페이지가 다른 도메인의 API에서 데이터를 가져오거나, 웹 폰트를 사용하는 경우등에 CORS가 사용된다

처음에 사용할 때는 모든 출처에서 허용하기 위해
app.use(cors());
로 사용을 하였는데, 계속 아래와 같은 오류가 발생했다

Access to XMLHttpRequest at 'https://하위도메인.soljk.com/signin' from origin 'https://soljk.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS정책에 의해 접근이 차단되고, 요청된 리소스에 Access-Control-Allow-Origin 헤더가 없다고 한다...

여러 이유가 있었는데,
바꿔준 사항은

const corsOptions = {
    origin: ["https://soljk.com"], // 접근 권한을 부여하는 도메인
    credentials: true, // 응답 헤더에 Access-Control-Credentials 추가
    optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};

app.use(cors(corsOptions));

우선 모두 허용을 하지않고 정해진 주소만 허용하게 끔 작성해주었다
그리고 credentials: true로 설정을 해주게 되면
클라이언트에서 요청을 보낼때 헤더에 withCredentials: true를 설정해 주어야된다고 한다.

하지만 이 방법으로도 오류는 해결되지않았다.

여러방면으로 찾아 보던 중 서버에서 오류를 발견하게 되었는데
설정파일의 문제였다
rewrite or internal redirection cycle while internally redirecting to "/index.html 이러한 오류를 발견했는데
Nginx가 내부적으로 리디렉션을 수행하면서 무한 루프에 빠졌음을 나타낸다고 한다 주로 Nginx의 rewrite규칙이나 location지시어의 잘못된 설정으로 인해 발생한다고한다

서버 설정을 해줄 때 location을 정확하게 설정해주지 않은게 문제가 되었나 싶어서

location /signin {
            proxy_pass https://하위도메인.soljk.com:port;
            include proxy_params;
    }
location /projects {
            proxy_pass https://하위도메인.soljk.com:port;
            include proxy_params;
    }

/signin으로 들어오는 요청을 proxy_pass의 주소로 프록시 시켜주었다.
이 방식으로 설정을 해주었더니 작동을 하게되었지만..?
정확하게 맞는 방법인지는 아직 잘 모르겠다

여러가지 많이 찾아보고 읽어봤지만...아직 잘 모르겠는걸 보면...아직 부족함을 많이 느끼고있다

CORS 어려워...

공부할게 더 늘었다....