자바스크립트(Javascript)_CORS (Cross-Origin Resource Sharing) 해결방법

오늘날의 디지털 시대에 강력한 온라인 존재감을 갖는 것은 기업, 조직 및 개인의 성공에 매우 중요합니다. 검색 엔진 최적화(SEO)는 웹 사이트가 검색 엔진에서 좋은 순위를 차지하도록 보장하고 사용자에게 더 잘 보이도록 하는 핵심 구성 요소입니다.

 

CORS 또는 상호 출처 간 자원 공유는 웹 개발의 중요한 측면이며 웹 사이트의 SEO에 상당한 영향을 미칠 수 있습니다. 이 블로그 게시물에서는 CORS와 그 중요성 및 웹 사이트의 검색 엔진 순위를 높이는 데 도움이 되는 방법에 대해 자세히 알아보겠습니다.

 

CORS의 이해

CORS 또는 Cross-Origin Resource Sharing은 웹 브라우저가 한 도메인의 웹 페이지가 다른 도메인에서 데이터를 요청하고 로드하는 방법을 제어하기 위해 구현한 보안 기능입니다. 이는 웹 응용 프로그램의 보안을 강화하는 동시에 다른 오리진 또는 도메인 간에 리소스를 공유할 수 있도록 하는 데 필수적인 메커니즘입니다. 올바르게 구현되면 웹 사이트의 SEO에 여러 가지 방식으로 긍정적인 영향을 미칠 수 있습니다. 사용자 환경 개선 SEO의 기본적인 측면 중 하나는 사용자 경험입니다. 웹 사이트가 느리게 로드되거나 외부 소스에서 데이터를 검색할 때 문제가 발생하면 사용자는 사이트를 포기할 가능성이 더 높습니다. CORS를 사용하면 웹 페이지가 여러 도메인에서 원활하게 리소스를 가져올 수 있으므로 콘텐츠가 더 빠르고 효율적으로 전달되도록 보장합니다. 이러한 향상된 사용자 경험은 바운스율을 낮추고 사이트에서 보내는 시간을 증가시킬 수 있으며, 이 둘은 모두 SEO 순위 요인입니다.

 

컨텐츠 관련성 향상 검색 엔진은 사용자에게 적절하고 가치 있는 컨텐츠를 우선 순위로 지정합니다. CORS를 사용하면 소셜 미디어 피드 또는 내장된 비디오와 같은 타사 컨텐츠를 웹 페이지에 통합할 수 있습니다. 이렇게 함으로써 컨텐츠를 풍부하게 만들고 사용자에게 더 매력적인 경험을 제공할 수 있습니다. 이렇게 관련성이 증가하면 사용자가 참여하고 만족하도록 유지하여 웹 사이트의 SEO를 향상시킬 수 있습니다. 모바일 최적화 모바일 사용자가 현재 온라인 트래픽의 상당 부분을 차지하고 있기 때문에 모바일 친화성은 중요한 SEO 순위 요소입니다.

 

CORS는 다양한 도메인의 리소스, 스크립트 및 API에 액세스하여 모바일 장치에 대한 웹 사이트를 최적화하는 데 도움을 줄 수 있으며, 이를 통해 다양한 장치에서 사이트가 원활하게 작동하여 SEO 성능을 더욱 향상시킬 수 있습니다. CORS 구현 모범 사례 CORS를 효과적으로 구현하는 것은 안전한 웹 환경을 유지하면서 SEO의 이점을 실현하는 데 필수적이며 다음과 같은 모범 사례를 고려해야 합니다: 서버 구성 서버가 CORS 요청에 올바르게 응답하도록 구성되어 있는지 확인하고 "Access-Control-Allow-Origin"과 같이 적절한 헤더를 사용하여 리소스에 액세스할 수 있는 도메인을 지정합니다 SRI(하위 리소스 무결성) 사용 외부 스크립트나 리소스를 로드할 때 SRI를 사용하여 가져온 리소스가 변조되지 않았는지 확인합니다. 이렇게 하면 사이트에 추가 보안 계층이 추가되어 검색 엔진에서 알 수 있습니다. 모니터 및 테스트 CORS 관련 문제가 있는지 정기적으로 웹 사이트를 모니터링합니다. 다양한 시나리오에서 사이트가 어떻게 작동하는지 테스트하고 필요에 따라 조정하여 원활한 사용자 환경을 보장합니다.

 

1. CORS 는 클라이언트와 브라우저간의 원본 비교를 통해 일어남으로 서버와의 통신으로 전환하고 화면에 다시 뿌려주면 CORS문제를 해결할 수 있다.

// 클라이언트에서 GET 요청 보내기
axios.get('http://your-server.com/api/data')
  .then(response => {
    console.log('서버 응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

 

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

// CORS 설정
const corsOptions = {
  origin: 'http://your-client.com', // 클라이언트 도메인
  methods: 'GET', // 허용할 HTTP 메서드
};

// CORS 미들웨어 적용
app.use(cors(corsOptions));

// 라우트 처리
app.get('/api/data', (req, res) => {
  const responseData = { message: '안녕, CORS 문제 해결됨!' };
  res.json(responseData);
});

// 서버 시작
const port = 3000;
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});

 

 

2. 솔루션을 통해 간단하게 CORS 해결하기

// Axios 라이브러리를 사용하여 외부 API로 GET 요청을 보냅니다.
axios.get('https://proxy.cors.sh/https://api.example.com/some-endpoint')
  .then(response => {
    console.log('외부 API 응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

https://cors.sh/

CORS.SH - A Fast & Reliable CORS Proxy for your websites

위의 링크에서 API 키 받아서 사용하면 된다. 아래와 같은 키를 받을 수 있는데 headers영역에 추가해주면 실행된다.

단, 3일간 무료고 1달에 4$의 요금이 들기 때문에 간단하게 테스트만 진행하고 API 연계나 파라미터가 너무 복잡하여 하나의 통일된 방식을 선호한다면 추천합니다.

'x-cors-api-key': 'temp_12345793457923455d',

 

3. 미들웨어 연결

// cors 설치 노드필수!!
npm install cors

const express = require('express'); // express server 가져옴
const cors = require('cors'); // 다운받았던 cors 가져옴

const app = express();

// CORS 설정
app.use(cors());

// 나머지 라우트 및 앱 설정

app.listen(process.env.PORT || 3000, () => {
  console.log('서버가 실행 중입니다.');
});

// get요청으로 hearder에 Access-Control-Allow-Origin에 대해 모든 도메인 허용
app.get('/your-api-endpoint', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*'); // * 가 모든 도메인에서의 요청을 허용의미
  res.json({ data: 'Your data' });
});

app.use(cors({
  origin: 'https://allowed-domain.com', // 특정 도메인에서의 요청만 허용
  methods: 'GET,POST', // 지원할 HTTP 메서드 지정
}));

 

4. Heroku

https://www.heroku.com/home

Cloud Application Platform | Heroku

// 헤로쿠 방식
https://my-simple-proxy.herokuapp.com/https://foo.sample.com

//https://my-simple-proxy.herokuapp.com/ 앞에 붙혀주기만 하면된다.

단, 이방식도 위 솔루션 방식처럼 API키를 받아야 되나 위의 방식보다는 조금 더 까다로운 듯 하다.

 

CORS를 웹 개발 전략에 통합하는 것은 보안 모범 사례일 뿐만 아니라 웹 사이트의 SEO를 강화하는 방법입니다. 향상된 사용자 환경, 향상된 콘텐츠 관련성 및 모바일 최적화를 포함한 CORS의 이점은 검색 엔진 순위에 긍정적인 영향을 미칠 수 있습니다. CORS를 구현하는 모범 사례를 따름으로써 웹 응용 프로그램의 보안 및 무결성을 보장하면서 이 메커니즘의 이점을 누릴 수 있습니다. 온라인 가시성이 중요한 시대에 CORS를 전략의 일부로 사용하여 SEO에 웹 사이트를 최적화하는 것은 디지털 존재감의 판도를 바꿀 수 있습니다. 경쟁에서 우위를 유지하고 CORS를 보안의 일부로 만드십시오.

 

사용자 경험, 보안, 콘텐츠 관련성을 우선시함으로써 CORS는 보안 전문가와 웹 개발자 모두에게 소중한 도구가 됩니다. 디지털 환경은 끊임없이 발전하고 있으며 최신 모범 사례에 대한 정보를 유지하는 것이 필수적이라는 것을 명심하십시오. 따라서 CORS의 힘을 활용하여 웹 사이트의 보안을 오버차지하고 검색 엔진 결과 페이지에서 더 나은 순위를 달성하십시오. 웹 사이트의 성공은 CORS 구현을 위한 것입니다.