CORS(Cross-Origin Resource Sharing) 개념
크로스 도메인 자바스크립트 개념에 대해 질문이 있습니다.
선택한 도메인에서만 웹 서비스를 사용할 수 있는 서버(ex amazon.com )가 있습니다.그래서 확실히, 만약 내가 그들의 서비스를 이용하려 한다면, 내 지역의 서비스를 이용할 수 없습니다.내 콘솔에 이것이 있습니다.
오리진 간 요청 차단:동일한 오리진 정책에서는 http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON=0 에서 원격 리소스를 읽을 수 없습니다.이는 리소스를 동일한 도메인으로 이동하거나 CORS를 활성화하여 해결할 수 있습니다.
추신: 저도 jquery cross domain way를 사용했지만 작동하지 않았습니다.
그러나 선택된 도메인 중 아마존의 웹 서비스를 사용하기 위해 일부 도메인에 자바스크립트가 있으면 html에 포함하면 작동합니다.
<script src="http://example.com"></script>
그들은 Ajax의 응답을 받을 수 있는 방법을 가지고 있습니다.
제 질문은 다음과 같습니다.
- 인터넷 URL에서 자바스크립트 파일을 참조하면 어떻게 됩니까?우리 기계에 로컬 복사본이 실행되고 있습니까?
- httpRequest가 생성되었습니까? 요청 소스가 내 도메인 또는 xyz로 설정됩니다.
앞의 중요한 참고 사항: 반대쪽 끝에 있는 서버가 활성화하지 않으면 클라이언트 측 코드에서 할 수 있는 일이 없으며 이를 통해 교차 오리진 ajax 요청을 허용합니다.
질문에 대답하기 전에 배경을 말씀드리겠습니다.
동일 오리진 보안 정책
간단히 말하면, 동일한 오리진 보안 정책은 한 오리진의 스크립트가 다른 오리진의 콘텐츠를 가져올 수 없도록 보장합니다.이제 원산지의 개념을 설명해 드리자면, Same-Origin Security Policy의 위키백과 기사의 일부를 인용하겠습니다.
다음 표는 URL "http://www.example.com/dir/page.html "에 대한 검사의 일반적인 결과에 대한 개요입니다.
Compared URL Outcome Reason ------------------------------------------------------- ------- ---------------------- http://www.example.com/dir/page2.html Success Same protocol and host http://www.example.com/dir2/other.html Success Same protocol and host http://username:password@www.example.com/dir2/other.html Success Same protocol and host http://www.example.com:81/dir/other.html Failure Same protocol and host but different port https://www.example.com/dir/other.html Failure Different protocol http://en.example.com/dir/other.html Failure Different host http://example.com/dir/other.html Failure Different host (exact match required) http://v2.www.example.com/dir/other.html Failure Different host (exact match required) http://www.example.com:80/dir/other.html Depends Port explicit. Depends on implementation in browser.다른 브라우저와 달리 Internet Explorer는 원래 위치에 보안 영역을 사용하여 원래 위치 계산에 포트를 포함하지 않습니다.
따라서 예를 들어, JavaScript는 웹 서버에서 원래 서버가 아닌 다른 웹 서버로 HTTP 요청을 할 수 없습니다.이것이 바로 XmlHttpRequests(일명 AJAX)를 다른 도메인으로 만들 수 없는 이유입니다.
CORS는 브라우저의 클라이언트 코드가 아닌 다른 끝에 있는 서버가 동일 오리진 정책을 완화할 수 있는 한 가지 방법입니다.
CORS(Cross Origin Resource Sharing)에 대한 지나치게 단순화된 설명입니다.
CORS 표준은 서버가 허용된 오리진 도메인에 리소스를 제공할 수 있는 새로운 HTTP 헤더를 추가하여 작동합니다.브라우저는 이러한 헤더를 지원하며 브라우저가 설정하는 제한을 준수합니다.
예:당신의 사이트가http://my-cool-site.com에 API다.http://third-party-site.comAJAX를 액세스할 수AJAX의 를
그리고 당신의 서버에 있는 페이지가my-cool-site.com다에게 .third-party-site.com. 일반적으로 사용자 브라우저는 Same-Origin Security Policy에 따라 자신의 도메인/하위 도메인이 아닌 다른 사이트로 AJAX 호출을 거부합니다.그러나 브라우저와 서드파티 서버가 CORS를 지원하는 경우 다음과 같은 일이 발생합니다.
브라우저에서 전송 및
Origin더에 대한 HTTP :third-party-site.comOrigin: http://my-cool-site.com을 수락하는 , 3 의 을 할 과 합니다 합니다 과
Access-Control-Allow-OriginHTTP 헤더:Access-Control-Allow-Origin: http://my-cool-site.com모든 도메인을 허용하기 위해 타사 서버는 다음 헤더를 보낼 수 있습니다.
Access-Control-Allow-Origin: *사이트가 허용되지 않으면 브라우저에서 오류가 발생합니다.
고객이 CORS를 지원하는 상당히 최신 브라우저를 보유하고 있고 타사 서버에서 CORS를 지원하는 경우 CORS가 유용하게 사용자에게 CORS는 유용합니다.
더 이상 사용되지 : IE8)에서는 특정 해야 를 Microsoft 에서는 해야 를 XDomainRequest 대신 XMLHttpRequestCORS에서합니다. 이모든 브라우저(Microsoft 버전 를 CORS에서 합니다. CORS에서 CORS를 처리합니다.XMLHttpRequest대신.그러나 오래된 브라우저를 지원해야 하는 경우 이 페이지에서는 다음과 같이 설명합니다.
CORS 을 합니다 합니다를 사용하면 .
XMLHttpRequest3 및스 3.5+,리 4+,과XDomainRequestIE8+의 개체입니다.를 할 때XMLHttpRequest을 알게 ,가차인는을면을 CORS다게을다게을ts,sm,면f가setrltt차y인-eo크로스 브라우저 CORS 객체를 생성할 수 있도록 도와주는 자바스크립트 기능이 있습니다.
function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr){ // XHR has 'withCredentials' property only if it supports CORS xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined"){ // if IE use XDR xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; }
다시 말하지만, 이는 구식 브라우저에만 필요합니다.
위와 같은 이유로 스크립트에서 아마존의 웹 서비스를 사용할 수 없습니다.그리고 아마존 서버는 자바스크립트 파일을 선택된 도메인에서 제공되는 페이지에만 다운로드할 수 있도록 허용할 것입니다.
번호가 매겨진 질문에 대답하기
-
- 파일이 같은 원본이면 브라우저에서 파일을 다운로드합니다.
- 동일한 원본이 아닌 경우 CORS 요청이 성공하면 파일이 다운로드됩니다.
- 그렇지 않으면 스크립트 다운로드가 실패합니다.
- 다운로드가 성공하면 브라우저의 메모리에 자바스크립트 파일의 내용이 로드되고 해석되어 실행됩니다.
CORS에 대한 설명을 참조하여 이해할 수 있습니다.
CORS는 서버에서 수정해야 하는 설정입니다.웹 페이지의 리소스를 외부 도메인에서 요청할 수 있습니다.단순히 고객의 코드를 변경하는 것만으로는 CORS의 기능이 변경되지 않습니다.
"스크립트" 태그 내에서 페이지에 액세스할 수 있는 이유는 태그가 교차 오리진 요청에 대해 다른 모든 데이터와 다르게 취급되기 때문입니다.예전에는 HTML 태그 안에 JSON 데이터를 저장하는 JSONP를 사용하여 CORS를 시스템에 "해킹"할 수 있었습니다.
Apache에서 CORS를 활성화하려면:
먼저 httpd.conf를 입력하여 찾습니다.
ps -ef | grep apache
아파치의 위치를 알려줄 겁니다해당 유형을 찾으면 다음을 수행합니다.
<apache-location> -V
그러면 다음과 같이 httpd.conf의 정확한 위치가 반환됩니다.
-D SERVER_CONFIG_FILE="/etc/apache2/apache2.conf"
이제 httpd.conf로 이동하여 "/"를 입력하여 검색해야 합니다.<directory>. 태그를 찾으면 바로 다음을 입력합니다.
Header set Access-Control-Allow-Origin "*"
다음을 실행하여 파일을 저장하고 구문이 올바른지 확인합니다.
apachectl -t
확인되면 graceful restart 명령을 실행합니다.
apachectl -k graceful
서버가 재시작되면 외부 스크립트를 통해 파일에 액세스할 수 있습니다.
오류로 인해 구성을 저장할 수 없는 경우 편집기를 종료하고 다음을 입력합니다.
sudo chmod 755 httpd.conf
이렇게 하면 구성 파일에 대한 소유자의 전체 액세스 권한이 주어지지만 다른 사용자는 모두 실행 파일(http://en.wikipedia.org/wiki/Chmod) 만 읽을 수 있습니다.
이러한 변경 사항을 테스트하려면 외부 서버에서 새 index.html 파일을 만들고 다음과 함께 로드합니다.
<!doctype html>
<html>
<head>
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<!-- Insert Scripts & CSS Here -->
<link rel="stylesheet" type="text/css" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script>
jQuery.get('yourwebsite.com/file.csv', function(data) {
document.write(data);
});
</script>
</body>
</html>
결과 출력은 yourwebsite.com/file.csv 의 실시간 데이터 피드를 반영해야 합니다.
html 페이지에 출력이 없으면 f12를 눌러 firefox에서 developer의 콘솔을 엽니다.오류가 나타날 가능성이 높습니다.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at yourwebsite.com/file.csv. This can be fixed by moving the resource to the same domain or enabling CORS.
이는 a) httpd.conf가 올바르게 구성되지 않았거나 저장하지 않았거나 b) 웹 서버를 다시 시작하는 것을 잊어버렸음을 의미합니다.
.htaccess 파일에서 다음 행을 추가하기만 하면 됩니다.
Header set Access-Control-Allow-Origin *
이것은 프론트엔드의 문제가 아니라 백엔드의 문제입니다.CORS 원점은 백엔드에 허용해야 합니다.
장고를 쓰고 있었어요.그리고 CORS 미들웨어를 추가하고 CORS_ORIGINS를 허용함으로써 이 문제가 해결되었습니다.
CORS 미들웨어 추가
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
CORS를 허용하는 겁니다.모든 원산지를 허용하거나 특정 원산지만 허용할 수 있습니다.
CORS_ORIGIN_ALLOW_ALL = True
특정 원산지만 허용
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'<YOUR_DOMAIN>[:PORT]',
)
예:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:3000', 'frontend.com',
)
언급URL : https://stackoverflow.com/questions/25310450/cross-origin-resource-sharing-cors-concept
'programing' 카테고리의 다른 글
| 원형 외래 키가 있는 두 개의 테이블에서 삭제 (0) | 2023.09.16 |
|---|---|
| MySQL에서 MSSQL IDENTITY 열과 동등함 (0) | 2023.09.16 |
| UITable View Cell의 동적 높이 문제(Swift) (0) | 2023.09.16 |
| Python and Django Operational Error (2006, 'MySQL 서버가 사라졌습니다') (0) | 2023.09.16 |
| 어떻게 하면 HTML과 CSS로 div 콘텐츠를 한 줄로 유지할 수 있습니까? (0) | 2023.09.16 |