source

사이트 간 AJAX 요청

manysource 2023. 10. 12. 23:21

사이트 간 AJAX 요청

웹사이트에서 다른 도메인에 호스팅되는 REST 웹 서비스로 AJAX 요청을 해야 합니다.

Internet Explorer에서 이 기능은 잘 작동하지만 Mozilla 및 Google Chrome과 같은 다른 브라우저는 훨씬 더 엄격한 보안 제한을 가하여 사이트 간 AJAX 요청을 금지합니다.

문제는 제가 사이트를 호스팅하는 도메인이나 웹 서버에 대한 통제권이 없다는 것입니다.이는 REST 웹 서비스가 다른 곳에서 실행되어야 하며, 어떠한 리디렉션 메커니즘도 적용할 수 없음을 의미합니다.

다음은 비동기 호출을 하는 자바스크립트 코드입니다.

var serviceUrl = "http://myservicedomain";
var payload = "<myRequest><content>Some content</content></myRequest>";
var request = new XMLHttpRequest();
request.open("POST", serviceUrl, true); // <-- This fails in Mozilla Firefox amongst other browsers
request.setRequestHeader("Content-type", "text/xml");
request.send(payload);

Internet Explorer(인터넷 익스플로러) 이외의 다른 브라우저에서 이 작업을 수행하려면 어떻게 해야 합니까?

JSONP가 도움이 될 수도 있습니다.

NB xml 대신 json을 사용하려면 메시지를 변경해야 합니다.

편집

flickr, twitter 등 주요 사이트에서 콜백 등으로 jsonp 지원

정답으로 표시된 게시물이 오류입니다. iframes 문서가 상위 문서에 액세스할 수 없습니다.동일한 오리진 정책은 두 가지 방식으로 작동합니다.

사실 xmlhttprequest를 사용하여 휴식 기반 웹 서비스를 소비하는 것은 어떤 방식으로도 불가능합니다.(아무 프레임워크 없이) 다른 도메인에서 데이터를 로드하는 유일한 방법은 JSONP를 사용하는 것입니다.다른 모든 솔루션은 자체 도메인에 위치한 서버 사이드 프록시 또는 원격 도메인에 위치한 클라이언트 사이드 프록시 및 일종의 사이트 간 통신(easyX와 같은)을 필요로 합니다.DM)을 통해 문서 간의 통신을 수행합니다.

이것이 IE에서 작동한다는 사실은 기능이 아닌 IE의 보안 문제입니다.

유감스럽게도 사이트 간 스크립팅은 금지되어 있으며 허용된 해결 방법은 자신의 도메인을 통해 요청을 프록시화하는 것입니다. 서버 사이드 코드를 추가하거나 수정할 능력이 정말 없습니까?

또한 스크립트 태그를 통한 데이터 수집과 관련된 2차 해결책은 SOAP 서비스를 통해 해킹할 수 있는 GET 요청만 지원할 뿐 설명한 RESTful 서비스에 대한 POST 요청은 지원하지 않습니다.

AJAX 솔루션이 존재하는지 확실하지 않습니다. <form> 솔루션으로 돌아갈 수도 있습니다.

iframe을 다른 사이트에 대한 요청을 위한 컨테이너로 사용하는 것은 그다지 명확하지 않은 해결 방법입니다.문제는 부모가 iframe의 컨텐츠에 액세스할 수 없고 iframe의 "src" 속성만 탐색할 수 있다는 것입니다.그러나 iframe 컨텐츠는 부모의 컨텐츠에 액세스할 수 있습니다.

따라서 iframe의 내용이 알고 있는 경우 상위 페이지의 일부 자바스크립트 내용을 호출하거나 부모의 DOM에 직접 액세스할 수 있습니다.

EDIT: 샘플:

function ajaxWorkaroung() {
    var frm = gewtElementById("myIFrame")
    frm.src = "http://some_other_domain"
}
function ajaxCallback(parameter){
    // this function will be called from myIFrame's content
}

서비스 도메인에서 CORS(Cross Origin Resource Sharing)를 허용합니다.

일반적인 시나리오:대부분의 CORS 호환 브라우저는 먼저 OPTONS 헤더를 보내는데, 서버는 어떤 헤더가 받아들여지는지에 대한 정보를 반환해야 합니다.헤더가 제공된 요청에 대한 서비스 요구사항(Allowed Methods being GET 및 POST, Allowed-Origin * 등)을 충족하면 브라우저는 적절한 방법(GET, POST 등)으로 요청을 재전송합니다.

이 포인트 앞으로의 내용은 IE를 사용할 때와 동일하거나, 동일한 도메인에 게시하는 경우 더 간단하게 설명할 수 있습니다.

캐비엇:일부 서비스 개발 SDK(특히 WCF)에서는 요청 처리를 시도하는데, 이 경우 요청에 응답하고 서버에서 메서드가 두 번 호출되지 않도록 OPTONS Method를 전처리해야 합니다.

간단히 말해서, 문제는 서버 쪽에 있습니다.

Edit IE 9와 CORS의 아래 문제는 완전히 구현되지 않았다는 점에서 한 가지 문제가 있습니다.다행히 서버 측 코드에서 서비스로 전화를 걸면 이 문제를 해결할 수 있으며 서버를 통해 다시 돌아올 수 있습니다(예: mypage.aspx?service=blah&method=blahblah&p0=firstParam=something).여기서부터 당신의 서버측 코드는 요청/응답 스트림 모델을 구현해야 합니다.

오리진 도메인에서 서버측 프록시를 사용하기만 하면 됩니다.다음은 http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html 의 예입니다.

이 작업은 올바른 인수로 curl을 호출하고 curl 출력을 반환하는 웹 서버 설정 로컬리를 사용하여 수행할 수도 있습니다.

앱을

require 'sinatra'
require 'curb'

set :views,lambda {"views/"+self.name.to_s.downcase.sub("controller","")}
set :haml, :layout => :'../layout', :format => :html5, :escape_html=>true
disable :raise_errors

get '/data/:brand' do
  data_link =  "https://externalsite.com/#{params[:brand]}"
  c = Curl::Easy.perform(data_link)
  c.body_str
end

ajax 요청을 localhost:4567/data/something에 보내면 externalsite.com/something 에서 결과가 반환됩니다.

다른 옵션은 원격 도메인 호스트 이름을 "마스크"하기 위해 자신의 도메인에 CNAME 레코드를 설정하는 것입니다.

언급URL : https://stackoverflow.com/questions/333532/cross-site-ajax-requests