깃허브 백준 업로드에러 / CORS에러

백준 깃허브 업로드가 안되는 분들을 위해 포스팅 하게 되었습니다.

아래와 같은 방법으로 먼저 해결해보시길 권장드립니다.

1. 백준허브 익스텐션 재설치
2. 백준허브 Auth 과정 재실행
3. GitHub 토큰 만료 확인 => 만료 2일 전이라서 재발급 받음
4. 레포 연결 확인 => 확인함
5. 비어있는 레포에 파일(README) 추가 => 하였으나, 안됌

이렇게 시도해보았지만, 필자는 해결되지 않았습니다.
따라서 어떠한 이유 때문에 이러한
에러가 발생하는지 원인을 알아야 해결할 수 있어서,
원인을 알기 위해 알아보고 공부했던 내용을 공유하고자합니다.

깃헙 백준업로드 에러_CORS 오류

깃허브와 백준은 서로 다른 도메인을 가지고 있기 때문에, 보안상의 이유로 CORS(Cross-Origin Resource Sharing) 정책을 적용하고 있습니다. 이 정책은 웹 어플리케이션이 다른 도메인의 리소스에 접근하는 것을 제한하는데, 이로 인해 깃허브에서 백준의 API에 접근할 때 CORS 오류가 발생할 수 있습니다.

CORS 오류를 해결하기 위해서는 다음과 같은 방법들이 있습니다.

1. 백준의 API를 호출하는 서버를 구축하여 CORS 오류를 회피할 수 있습니다. 이를 위해서는 Node.js와 Express를 사용하여 간단한 서버를 만들고, 해당 서버를 통해 백준의 API를 호출합니다.

2. JSONP(JSON with Padding)를 사용하여 CORS 오류를 해결할 수 있습니다. 이 방법은 서버에서 JSONP 형식으로 데이터를 반환하도록 설정하고, 클라이언트에서는 script 태그를 이용하여 해당 데이터를 가져옵니다. 하지만, JSONP는 보안 취약점으로 인해 현재는 권장되지 않는 방법입니다.

3. 크롬 익스텐션 등의 도구를 사용하여 CORS 오류를 우회할 수 있습니다. 이 방법은 보안상의 이슈가 있을 수 있으므로, 사용에 주의가 필요합니다.

4. 백준에서 제공하는 API를 사용하는 대신, 직접 백준에서 데이터를 스크래핑하여 가져오는 방법을 사용할 수도 있습니다. 하지만, 이 방법은 백준의 이용 약관에 위배될 수 있으므로, 사용에 주의가 필요합니다.

이러한 방법들 중에서, 가장 권장되는 방법은 서버를 구축하여 CORS 오류를 회피하는 방법입니다. 이 방법을 사용하면 보안적인 측면에서도 안전하고, 다른 방법들보다 효율적인 데이터 처리가 가능합니다.

정리하자면, CORS(Cross-Origin Resource Sharing) 오류는 웹 브라우저에서 발생하는 보안 정책으로, 서로 다른 도메인 간의 자원 요청에 대한 제한을 설정합니다. 이 정책은 보안상의 이유로 브라우저에서 JavaScript를 이용하여 다른 도메인의 자원을 가져오거나 요청하는 것을 제한합니다.

주로 CORS 오류의 다양한 원인

1. 서로 다른 도메인 간의 자원 요청
2. XMLHttpRequest 객체를 사용한 자원 요청
3. 브라우저 보안 설정에 따른 제한
4. 서버 측에서 Access-Control-Allow-Origin 헤더 설정이 잘못된 경우

CORS 오류를 해결방법

1. 서버 측에서 Access-Control-Allow-Origin 헤더를 설정합니다.
2. JSONP(JSON with Padding) 방식을 사용합니다.
3. 프록시 서버를 이용합니다.
4. CORS를 해제하는 브라우저 확장 프로그램을 사용합니다.
   CORS 오류를 해결하는 방법은 상황에 따라 다르며, 웹 애플리케이션을 개발할 때 반드시 고려해야 하는 중요한 문제 중 하나입니다. 따라서, 개발 시에는 CORS 오류를 방지하기 위한 적절한 대응 방안을 고려하여야 합니다.

백준의 API를 호출하는 서버를 구축하여 CORS 오류를 회피하는 방법

1. Node.js와 Express를 설치합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

   npm install express

2. 서버 파일(app.js)을 생성합니다.
   (javascript)

const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
const port = 3000;

app.use(cors());

app.get('/baekjoon', async (req, res) => {
  try {
    const response = await axios.get('https://api.acmicpc.net/');
    res.send(response.data);
  } catch (error) {
    console.error(error);
  }
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

3. 서버 파일(app.js)을 실행합니다.
   node app.js

4. 클라이언트에서 서버에 요청을 보냅니다.
   (javascript)

const axios = require('axios');

axios.get('http://localhost:3000/baekjoon')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위 코드에서 서버는 3000번 포트에서 실행되고, 클라이언트는 서버의 /baekjoon 경로에 GET 요청을 보내게 됩니다. 서버에서는 axios 모듈을 이용하여 백준의 API에 GET 요청을 보내고, 응답을 클라이언트로 전달합니다. 이때, cors 모듈을 사용하여 CORS 오류를 회피할 수 있습니다.

위와 같이 서버를 구축하면, 클라이언트는 서버에 요청을 보내어 백준의 API를 사용할 수 있으며, 이를 통해 CORS 오류를 회피할 수 있습니다.

또는

• 터미널에

  open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security
  *주의: --user-data-dir 경로를 수정하게 되면 즐겨찾기했던목록 들이 초기화됩니다.

-> 브라우저가 새로 뜨면서 적용됩니다.

• 복구
  open -a "Google Chrome" --args --profile-directory=Default --enable-web-security

Moesif Origin & CORS Changer 설치

Moesif Orign & CORS Changer 라는 크롬 익스텐션이다.
Response의 CORS 관련 헤더를 조작할 수 있습니다.(다운로드 페이지)

다만, HTTPS 환경에서 적용하려면 ADVANCED SETTINGS에서 도메인을 직접 주어야 하는데 (기본은 whildcard로 적용되지만 https는 됩니다.), 이때 도메인의 메일을 적어주어야 ADVANCED SETTINGS 에 진입할수 있습니다..

on을 누르게 되면

Please make sure you understand how CORS works first before using this.

For security reasons, please turn off after debugging.

라는 문구가 뜨는데, 즉. 설정해두고, 보안상의 문제로 사용할 때만 켜달라는 것이다.

(필자는 마지막 방법 진행)
마지막 사진과 같이 업로드 되었음을 확인할 수 있습니다.
이러한 방법으로 진행하면 됩니다.
긴 글 읽어주셔서 감사합니다.