소개
크로스 도메인은 내가 매일 인터뷰에서 자주 묻는 질문입니다. 이 용어는 프론트 엔드 세계에서 자주 나타납니다. 주된 이유는 보안 제한 (동일한 원천 전략, 즉 JavaScript 또는 쿠키가 동일한 도메인에서만 콘텐츠에 액세스 할 수 있기 때문입니다). 우리는 필연적으로 매일 프로젝트 개발 중에 도메인 교차 도메인 운영을 수행해야하기 때문에 크로스 도메인 기능은 프론트 엔드 엔지니어의 기본 기술 중 하나입니다.
대부분의 크로스 도메인 솔루션과 마찬가지로 JSONP는 또한 나의 선택이지만, 어느 날 PM 요구가 변경되었으며 전송 된 데이터의 양이 비교적 크고 GET 양식을 처리 할 수 없기 때문에 특정 기능을 지원 게시물로 변경해야합니다. 그래서 나는 오랫동안 알려진 CORS (Cross-Origin Resource Pharing)와 어려움을 겪고 있으며, 여기서 기사는 고군분투 기간 동안 간단한 표기법과 요약입니다.
• Cors가 할 수있는 일 :
Ajax의 정상적인 사용은 크로스 도메인 문제에 대한 정상적인 고려가 필요하므로 훌륭한 프로그래머들도 JSONP, Flash, Ifame, XHR2 등과 같은 도메인 교차 문제에 대한 솔루션으로 어려움을 겪었습니다.
• CORS의 원리 :
CORS는 AJAX가 크로스 도메인 액세스를 달성 할 수 있도록하는 크로스 도메인 액세스 메커니즘을 정의합니다. CORS는 한 도메인의 네트워크 응용 프로그램이 다른 도메인 크로스 도메인 AJAX 요청을 다른 도메인에 제출할 수 있도록 허용합니다. 이 기능을 구현하는 것은 매우 간단합니다. 서버의 응답 헤더를 보내십시오.
다음과 같이 자세한 내용은 아래 주제를 방문해 봅시다.
크로스 사이트 HTTP 요청은 자원이 요청을 시작하는 도메인이 요청을 시작하는 도메인과 다릅니다.
예를 들어, 웹 사이트 A (www.a.com)의 <Img> 태그를 통해 B 스테이션 (www.b.com/images/1.jpg)의 리소스를 소개하면 스테이션 A는 스테이션 B에 크로스 사이트 요청을 시작합니다.
이러한 종류의 이미지 리소스에 대한 크로스 사이트 요청은 허용되며 유사한 크로스 사이트 요청에는 CSS 파일, JavaScript 파일 등이 포함됩니다.
그러나 HTTP 요청이 스크립트에서 시작되면 보안상의 이유로 브라우저에 의해 제한됩니다. 예를 들어, XMLHTTPREQUEST 객체를 사용하여 HTTP 요청을 시작하려면 동일한 오리핀 정책을 준수해야합니다.
소위 "동일 원산지 정책"은 웹 애플리케이션이 XMLHTTPREQUEST 객체 만 사용하여 원점이있는 도메인에 HTTP 요청을 시작할 수 있음을 의미합니다. 이 요청 소스 및 요청 객체는 동일한 도메인에 있어야합니다.
예를 들어, http://www.a.com,이 웹 사이트의 프로토콜은 http이고 도메인 이름은 www.a.com이고 기본 포트는 80입니다. 다음은 상동 상황입니다.
• http : //www.a.com/index.html 균질
• https : //www.a.com/a.html 다른 소스 (다른 프로토콜)
• http : //service.a.com/testservice/test 다른 소스 (도메인 이름이 다릅니다)
• http : //www.b.com/index.html 다른 소스 (도메인 이름이 다릅니다)
• http : //www.a.com : 8080/index.html 다른 소스 (다른 포트)
보다 강력하고 풍부한 웹 애플리케이션을 개발하기 위해서는 크로스 도메인 요청이 매우 일반적입니다. 그렇다면 보안을 포기하지 않고 어떻게 크로스 도메인 요청을합니까?
W3C는 새로운 메커니즘, 즉 CORS (Cross-Origin Resource Sharing)를 권장합니다.
CORS (Cross-Origin Resource Sharing)는 클라이언트 + 서버 협업 선언을 통한 요청의 보안을 보장합니다. 서버는 HTTP 요청 헤더에 일련의 HTTP 요청 매개 변수 (예 : Access-Control-Ollow-Origin 등)를 추가하여 어떤 도메인 요청 및 허용되는 요청 유형을 제한합니다. 클라이언트는 요청을 시작할 때 자체 소스 (ORGIN)를 선언해야합니다. 그렇지 않으면 서버가 처리하지 않습니다. 클라이언트가 선언하지 않으면 요청은 브라우저가 직접 가로 채고 서버에 도달 할 수 없습니다. HTTP 요청을 받으면 서버는 도메인을 비교하고 동일한 도메인의 요청 만 처리됩니다.
CORS를 사용하여 크로스 도메인 요청을 구현하는 예 :
고객:
함수 gethello () {var xhr = new xmlhttprequest (); xhr.open ( "post", "http://b.example.com/test.ashx", true); xhr.setrequestheader ( "content-type", "application/x-www-form-urlencoded"); // 요청 소스 XHR.SetRequestHeader ( "Origin", "http://a.example.com"); xhr.onreadyStateChange = function () {if (xhr.readystate == 4 && xhr.status == 200) {var responeett = XHR.RESPONSETEXT; CONSOLE.INFO (responeetext);}} XHR.Send ();}섬기는 사람:
공개 클래스 테스트 : ihttphandler {public void processRequest (httpcontext context) {context.response.contentType = "text/plain"; // 모든 도메인 컨텍스트에서 요청을 받아들이는 선언. isreusable {get {return false;}}}웹 API에서 크로스 도메인 액세스를 활성화하십시오
CORS는 요청의 보안을 보장하기 위해 서버 측 및 클라이언트 협업 명세서입니다. 따라서 웹 API에서 CORS를 활성화 해야하는 경우 그에 따라 구성해야합니다. 다행히도 Microsoft의 ASP.NET 팀은 공식 크로스 도메인 지원 솔루션을 제공하며 NUGET에만 추가해야합니다.
그런 다음 APP_START/WEBAPICONFIG.CS에서 다음 구성을 사용하여 크로스 도메인 액세스를 달성하십시오.
public static class webapiconfig {public static void register (httpconfiguration config) {// 웹 API 구성 및 서비스 // Bearer 토큰 인증 만 사용하도록 웹 API를 구성합니다. config.suppressDefaulTheStauthentication (); config.filters.add (new hostauthenticationFilter (oauthDefaults.authenticationType)); // 웹 API 라우팅 config.maphttpattributeroutes (); config.routes.maphttproute (name : "defaultapi" "API/{Controller}/{id}", 기본값 : new {id = lourteparameter.optional}); // Web API Cross-Domain Access enableCrossSiteRequests (config); config.formatters.jsonformatter.jsonformatters.jsonformatters.jsonformatters.jsonformatters. void enableCrossSiteRequests (httpconfiguration config) {var cors = new enablecorsattribute (Origins : "*", 헤더 : "*", 메소드 : "*"); config.enablecors (cors);}}IE10 아래의 브라우저는 CORS를 지원하지 않기 때문에 CORS는 현재 중국의 주류 크로스 도메인 솔루션이 아닙니다. 그러나 Windows 10이 출시되고 IE의 점진적인 감소가 발생하면 CORS가 가까운 미래에 크로스 도메인 표준 솔루션이 될 수 있습니다.
위는 편집자가 소개 한 JS 크로스 도메인 솔루션입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!