코드잇/위클리 페이퍼

CORS 에러와 SEO

인재재 2024. 8. 12. 14:15

CORS 에러에 대해 설명과 해결 방법

CORS (Cross-Origin Resource Sharing)란?

 

CORS의 문장을 직역하면 "교차(엇갈린) 출처 리소스 공유 정책" 이라고 해석할 수 있습니다. 웹 애플리케이션이 다른 Origin(출처)에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 기본적으로 브라우저는 보안을 위해 한 Origin(출처)에서 실행되는 웹 애플리케이션이 다른 Origin(출처)에서 호스팅되는 리소스에 접근하지 못하도록 차단합니다. 그러나 CORS 정책을 통해 특정 도메인에 대한 접근을 허용할 수 있습니다.

 

출처(Origin) : Protocol (http, https) + Host (사이트 도메인)  + Port (포트번호)

 

 

 

CORS 에러가 발생하는 이유

CORS 에러는 클라이언트(브라우저)가 다른 도메인으로부터 리소스를 요청할 때 서버가 그 요청을 허용하지 않는 경우 발생합니다. 예를 들어, http://example.com에서 http://api.example.com으로 API 요청을 보내는데, 자신의 출처와 동일한 리소스가 아닌 상태에서 서버가 CORS 요청을 처리하지 않으면 브라우저는 CORS 에러를 발생시킵니다.

 

CORS 에러 해결 방법

 

서버에서 Access-Control-Allow-Origin 헤더 설정:

  • 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 특정 도메인 또는 모든 도메인(*)의 요청을 허용할 수 있습니다.
const express = requite('express');
const app = express();

app.get('api',(req, res) => {
res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인 허용 - 또는 대신 허용하고자 하는 도메인
res.header("Access-Control-Allow-Origin", "GET, POST, OPTIONS, PUT, PATCH, DELETE"); // 모든 HTTP 메서드 허용
res.header("Access-Control-Allow-Origin", 'true'); // 클라이언트와 서버 간에 쿠키 주고받기 허용

res.send(data);
});

 

 

프록시 사이트 이용:

  • 개발 중에는 프론트엔드에서 API 요청을 보낼 때 프록시를 사용하여 CORS 문제를 우회할 수 있습니다.
  • 다만 현재 무료 프록시 서버 대여 서비스들은 모두 악용 사례 때문에 api 요청 횟수 제한을 두어 테스트용으로 사용 후 실전에서는 직접 프록시 서버를 구축하여 사용하여야 할 것 같습니다.

 

예시 - ( 각각 적용방법과 식이 조금씩 달라서 여러가지 무료 서버들을 검색하면서 적용해봐야 할 것 같음)

const url = 'https://google.com' //이용할 서버 URL로 변경

fetch(`https://cors-anywhere.herokuapp.com/${url}`) // 예시 heroku프록시 서버
    .then((response) => response.text())
    .then((data) => console.log(data));
 

 

 

 

SEO에 대한 설명과 개선 방법

SEO (Search Engine Optimization)란?

SEO는 검색 엔진 최적화를 의미하며, 웹사이트가 검색 엔진 결과 페이지에서 더 높은 순위에 나타나도록 하는 방법입니다. SEO는 웹사이트의 가시성을 높이고, 더 많은 유기적(자연적) 트래픽을 유도하기 위해 필수적입니다.

 

기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것입니다.

SEO 개선 방법

 

문법에 맞는 HTML 작성 :

  • 사용자가 검색할 가능성이 높은 키워드를 콘텐츠에 포함합니다. 제목, 본문, 메타 태그, URL, 이미지 ALT 태그에 관련 키워드를 자연스럽게 추가합니다. <title>태그 - 사이트 제목 , <div>태그 - 줄 바꿈/영역 , <strong>태그 - 강조

 

메타 태그 최적화:

  • 문법에 맞는 meta 태그를 최적화하여 검색 결과에서 웹페이지의 내용을 정확하게 전달합니다.
     
  • 웹사이트의 주요 내용과 관련된 키워드를 찾고 분석하여, 키워드에 적어주는 것도 중요합니다.
<meta name= "keywords" content = "키워드 1, 키워드 2"
<meta name = “description” content = "페이지 내용을 정리한 소개 글(검색 결과 프리뷰로 나타나는 영역)">

 

 

이미지에 alt 속성기재

  • alt 속성이란, alternative의 의미로 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트입니다.
  • 검색엔진에서 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 하기 때문에 SEO에 좋습니다.

 

사이트 속도 최적화:

  • 페이지 로딩 속도가 빠를수록 검색 엔진에서 높은 점수를 받을 수 있습니다. 이미지를 최적화하고, 불필요한 스크립트나 스타일시트를 줄이는등 다양한 방법으로 로딩 시간을 줄입니다.

 

모바일 친화적 디자인:

  •  웹사이트가 모바일 기기에서도 잘 동작하도록 최적화합니다. 모바일 친화성은 검색 순위에 중요한 요소 중 하나입니다.
  •  반응형 웹 디자인을 사용하여 다양한 화면 크기에 맞게 웹사이트가 적응하도록 합니다. 모바일 페이지 속도, 사용성, 디자인 등을 고려해야 합니다.

 

백링크 구축:

  • 다른 웹사이트에서 자신의 웹사이트로 연결되는 링크를 확보합니다. 신뢰할 수 있는 사이트로부터의 백링크는 검색 엔진에서 웹사이트의 신뢰성을 높이는 중요한 요소입니다.

 

사이트맵 제출:

  • XML 사이트맵을 작성하여 검색 엔진에 제출함으로써 검색 엔진이 웹사이트를 더 쉽게 크롤링할 수 있도록 합니다. 사이트맵에는 모든 중요한 페이지와 그 구조를 포함해야 합니다.