json cross-domain_javascript 기술에 대해 간략하게 이야기

이 글은 주로 이전에 다른 사람들이 json 크로스 도메인과 크로스 도메인에 대해 이야기하는 것을 들었지만 여전히 혼란스럽고 한 가지만 알고 있기 때문에 분노하여 다양한 정보를 읽고 알아냈습니다. 틀린 내용이 있으면 정정해주세요^_^

우선, 브라우저에는 매우 중요한 보안 제한 사항, 즉 동일 출처 정책이 있다는 점을 이해하세요. 즉, 서로 다른 도메인에 있는 클라이언트 스크립트는 명시적인 승인 없이는 서로의 리소스를 읽을 수 없습니다. 크로스도메인은 소스가 다르다는 뜻이에요~

간단히 말하면 프로토콜, 포트, 도메인 이름만 다르면 크로스 도메인입니다!

그러나 심층적인 프런트엔드 프로그래밍을 할 때는 필연적으로 크로스 도메인 작업이 필요합니다. 이때 '동일 출처 정책'은 너무 가혹한 것으로 보입니다.

해결책:

1. jsonp를 사용하여 도메인 간 문제 해결: (GET 요청에만 해당)

구현 원칙: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 동일 출처 정책에 의해 제한되지 않습니다. 동일한 출처를 요구하지 않고도 어디서나 JavaScript 파일을 로드할 수 있습니다.
그래서 JSONP의 아이디어는 서버와 함수 이름에 동의하고, 파일을 요청하면 서버가 JavaScript 조각을 반환한다는 것입니다. 이 JavaScript는 우리가 동의한 함수를 호출하고 데이터를 매개변수로 전달합니다. 매우 우연의 일치(실제로는 아님)는 JSON의 데이터 형식이 JavaScript 언어의 개체 형식과 정확히 동일하다는 것입니다. 따라서 이 개체는 우리가 합의한 기능에서 직접 사용할 수 있습니다.

JavaScript 코드를 사용하여 문제 해결

  var eleScript = document.createElement("script"); 
  eleScript.type = "text/javascript"; 
  eleScript.src = "http://example2.com/getinfo.php"; 
  document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

jquery를 사용하여 해결

 $.ajax({ 
    url: http://跨域的dns/document!searchJSONResult.action, 
    type: "GET", 
    dataType: 'jsonp',   //主要是这里和原来的json改变了！
    jsonp: 'jsoncallback', 
 })

2. HTML5의 window.postMessage 메소드를 사용하여 도메인 간 데이터 전송(IE8+, FireFox, Chrome, Opera 및 기타 브라우저에서만 호환 가능)

window.postMessage(message,targetOrigin) 메소드는 HTML5에 새로 도입된 기능으로, 창 객체가 동일한 출처에 속하든, 다른 출처에 속하든 상관없이 다른 창 객체에 메시지를 보내는 데 사용할 수 있습니다.

--------- 지금은 이 두 가지 해결 방법을 소개하겠습니다... 사실 다른 해결 방법도 많지만 나중에 하나씩 추가하겠습니다-- ----------- ----