Nginx에서 CORS 사용 방법

Nginx에서 CORS 사용 방법

2022-06-03 last update

6 minutes reading Nginx

CORS란 무엇입니까?


CORS는 크로스소스 자원 공유라고도 하는데 현대 웹 브라우저에서 사용하는 기술로 웹 서버에서 관리되는 자원에 대한 접근을 제어하는 데 사용된다.CORS는 다른 헤더(예: 소스, 액세스 제어 소스 등)를 사용하여 요청한 리소스가 브라우저에 전송될 수 있는 권한이 있는지 확인합니다.CORS의 주요 목적은 웹 브라우저에서 실행되는 웹 응용 프로그램이 권한이 없는 상황에서 서로 다른 출처에 있는 자원에 접근하는 것을 방지하는 것이다. 이것은 웹 응용 프로그램이 자원을 다운로드할 수 없다는 것을 의미한다. 예를 들어 이미지, 스크립트,css는 웹 응용 프로그램과 같은 원본에 있지 않을 때 서버가 이 동작을 허용하도록 설정하지 않는 한 모든 내용과 유사합니다.웹 브라우저에서 이를 사용하면 사용자는 권한이 부여되지 않은 측의 공격을 받지 않도록 데이터를 보호할 수 있습니다.해커는 사용자의 업무를 중단하거나 가치 있는 데이터를 얻기 위해 연결 과정에서 웹 페이지를 비밀리에 수정할 수 있다.그러나 CORS도 원가 효과나 간단한 편의성 때문에 개발자가 서로 다른 출처에서 자원을 불러올 수 있는 장점이 있다.이 경우, 이러한 요청을 허용하기 위해 웹 서버를 수정해야 합니다.본고는 어떻게 Nginx 웹 서버에서 이 일을 쉽게 완성할 수 있는지 보여 준다.

무엇이 CORS 요청을 촉발합니까


모든 요청이 CORS 요청을 촉발하는 것은 아닙니다. 자원은 보통 웹 응용 프로그램과 같은 원본에 있기 때문입니다.다른 경우 CORS가 트리거됩니다.CORS에는 간단한 요청과 CORS 사전 처리 요청의 두 가지 유형이 있습니다.
간단한 요청은 일반적인 요청으로 작동합니다. 사용자가 요청을 시작할 때 웹 브라우저는 서버에 특정 자원을 다운로드하기 위해 요청을 보내고 웹 서버는 요청의 출처를 검사하여 웹 서버의 규칙과 비교하고 일치하면 자원을 제공합니다.이 요청 유형은 OIRIGN과 ACCESS-CONTROL-ALLOW-ORIGIN 헤더를 사용하여 자원을 제공해야 하는지 확인합니다.GET, HEAD, POST 등의 요청 방법을 사용하고 Accept, Accept Language, Content Language, Content Type, DPR, Downlink, Save Data, Viewport Width, Width 등의 헤더를 사용할 때만 간단한 요청을 터치할 수 있습니다.그렇다고 모든 내용 유형이 간단한 요청을 일으키는 것은 아니다.여기에는 폼 인코딩 형식만 간단한 요청을 터치합니다.
1라운드에서 자원에 대한 직접적인 접근이 없기 때문에 미리 처리된 요청 유형은 매우 다르다.서로 다른 요청 헤더나 서로 다른 내용 유형을 사용하여 상술한 조건을 어떤 방식으로 바꾸면 사전 발송 요청이 촉발됩니다.사전 발송 요청에서 웹 브라우저는 먼저 웹 브라우저와 통신을 통해 자원에 접근할 수 있도록 확보한 다음에 웹 브라우저가 OK(HTTP 200) 응답으로 응답할 때 다른 다운로드 자원의 요청을 보냅니다.HTTP 옵션 요청 방법을 사용하여 첫 번째 요청을 시작한 다음 GET, POST 등의 요청 유형을 사용하여 리소스를 다운로드합니다.

CORS 요청을 지원하기 위해 Nginx를 구성하는 방법


이 절은 원본 자원 공유를 허용하기 위해nginx 웹 서버를 설정하는 방법을 보여 줍니다.개발자가 웹 서버에 접근할 권리가 있을 때만 이렇게 할 수 있습니다. 왜냐하면 이것은 Nginx의 프로필을 수정하는 것과 관련이 있기 때문입니다.
다음 간단한 코드 세그먼트를 사용하여 CORS 요청을 허용합니다.Ubuntu나 다른 플랫폼에서nginx 서비스의 기본 파일에 복사해야 합니다.
location \ {

if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods' 'POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods' 'POST';
}

}
기본 코드 세그먼트는 위에서 말한 바와 같다.이것은 요청 형식을 표시하기 위해request\umethod,add\uheader 등 명령을 포함하고 응답의 헤더를 브라우저에서 읽을 수 있도록 설정합니다.Access control alloworigin 헤더는 자원이 접근할 수 있는 원본을 정의합니다. 예를 들어github에서 관리되는 웹 응용 프로그램이 myOwnServer에서 관리되는 이미지에 접근하려면com, github의 URL을 myOwnServer의 Access control allow origin 명령의 값으로 사용해야 합니다.com, 그리고github에서 위탁 관리하는 웹 응용 프로그램이 myOwnServer에 요청을 보낼 때마다.com에서 이미지 파일을 다운로드하면 모든 요청에 권한이 부여됩니다.Access control allow method 헤더는 요청을 보내는 웹 응용 프로그램이 지원하는 요청 형식을 정의하고 나머지 헤더는 캐시 요청의 최장 시간과 지원하는 내용 형식에 사용됩니다.
위에서 설명한 바와 같이 옵션 요청이 완료되면 브라우저는 자원을 다운로드하기 위해 다른 요청을 보냅니다. 첫 번째 요청이 성공하면firstrequest\u 방법 (괄호에 있는 경우) 에서 헤더를 설정합니다.
상기 명령 외에도 Nginx에서 CORS 요청에 사용할 수 있는 다른 중요한 명령이 있습니다.가장 중요한 명령 중 하나는 액세스 제어 허용 헤더입니다. 브라우저가 검증할 수 있도록 허용된 헤더 이름을 사용하여 응답 헤더를 설정하는 것입니다.웹 응용 프로그램은 여러 가지 용도로 사용할 수 있습니다. 초기 옵션 요청 후의 후속 요청에 이러한 헤더가 존재하면 요청한 자원을 공유하기 전에 웹 서버에서 모든 헤더를 허용해야 합니다.
이 코드 세그먼트는 Nginx 기본 파일의 정확한 위치에서 중요합니다. Nginx는 일치하는 URL에 따라 다른 위치 블록을 실행하기 때문에 이런 위치 블록이 코드 세그먼트를 포함하지 않으면 실행되지 않기 때문에 안전을 위해 모든 위치 블록에서 이 코드 세그먼트를 사용하는 것이 중요합니다.일부 중요한 위치 블록은 이미지, PHP(~\.PHP$), CSS 등입니다.방해하다.
위의 코드 세그먼트를 저장한 후 Nginx 파일을 저장하고 변경 사항을 적용하기 위해 Nginx 서비스를 다시 불러옵니다.

결론


CORS는 타원 자원 공유라고 불리며 자원 접근을 제어하는 기술이다.이 자원들은 그림에서javascript 파일에 이르기까지 모든 파일이 될 수 있습니다.CORS의 주요 목적은 웹 응용 프로그램의 안전성을 강화하여 중개인의 공격을 방지하는 것이다.하지만 CORS도 장점이 있다.이 경우 기본적으로 허용되지 않으므로 CORS를 열어야 합니다.기본적인CORS 요청 유형은 간단한 요청 유형입니다. ORIGIN과ACCESS-CONTROL-ALLOW-ORIGIN 명령만 사용합니다. 이 명령들을 빌려 Nginx는 웹 브라우저에서 요청 자원에 접근할 수 있는 권한을 부여할 수 있습니다. 구체적인 것은 원본에 달려 있습니다.어떤 방식이든 CORS는 매우 유용하니 조심해서 사용해야 한다.