AJAX를 사용하여 교차 도메인 끝점 로드
AJAX를 사용하여 교차 도메인 HTML 페이지를 로드하려고 하는데 dataType이 "jsonp"가 아니면 응답을 받을 수 없습니다.그러나 jsonp를 사용하면 브라우저는 스크립트 MIME 유형을 예상하지만 "text/html"을 수신합니다.
요청 코드는 다음과 같습니다.
$.ajax({
type: "GET",
url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
dataType: "jsonp",
}).success( function( data ) {
$( 'div.ajax-field' ).html( data );
});
요청에 jsonp를 사용하지 않을 수 있는 방법이 있습니까?이미 crossDomain 파라미터를 사용해 봤지만 동작하지 않았습니다.
만약 없다면 html 콘텐츠를 jsonp로 받을 수 있는 방법이 없을까요?현재 콘솔은 jsonp 응답에 "예상치 않은 <"라고 표시되어 있습니다.
jQuery Ajax 노트
- 브라우저 보안 제한으로 인해 대부분의 Ajax 요청은 동일한 원본 정책을 따릅니다. 요청은 다른 도메인, 하위 도메인, 포트 또는 프로토콜에서 데이터를 성공적으로 검색할 수 없습니다.
- 스크립트 요청과 JSONP 요청은 동일한 오리진 정책 제한을 받지 않습니다.
크로스 도메인 장벽을 극복하는 방법은 다음과 같습니다.
크로스 도메인 요구에 도움이 되는 플러그인은 다음과 같습니다.
조심해!
이 문제를 해결하는 가장 좋은 방법은 백엔드에 자체 프록시를 생성하여 백엔드에 동일한 오리진정책 제한이 존재하지 않기 때문에 프록시가 다른 도메인의 서비스를 가리키도록 하는 것입니다.그러나 백엔드에서는 그렇게 할 수 없는 경우는, 다음의 힌트에 주의해 주세요.
**Warning!**
타사 프록시는 데이터를 추적할 수 있으므로 공개 정보에서는 사용할 수 있지만 개인 데이터에서는 사용할 수 없으므로 타사 프록시를 사용하는 것은 안전하지 않습니다.
다음 코드 예시는 jQuery.get()과 jQuery.getJSON()을 사용합니다.둘 다 jQuery.ajax()의 속기 메서드입니다.
모든 장소에서의 CORS
2021년 갱신
공개 데모 서버(cors-anywhere).herokuapp.com)는 2021년 1월 31일까지 매우 제한됩니다.
CORS Anywhere 데모 서버(cors-anywhere).herokuapp.com)는 이 프로젝트의 데모를 목적으로 하고 있습니다.그러나 이러한 악용을 저지하기 위한 노력에도 불구하고 데모를 주최하는 플랫폼(Heroku)에서 서버의 셧다운을 요구할 정도로 악용이 빈번해졌습니다.남용과 그 인기로 인해 다운타임이 점점 빈번해지고 있습니다.
이에 대응하기 위해 다음과 같이 변경하겠습니다.
- 환율 제한은 시간당 200에서 시간당 50으로 감소합니다.
- 2021년 1월 31일까지 코르스-어디서든 가능herokuapp.com 는 오픈 프록시로서의 기능을 정지합니다.
- 2021년 2월 1일부터 코르스-어디서나.herokuapp.com은 방문자가 도전을 완료한 후에만 요청을 처리합니다.사용자(개발자)는 어디에서나 페이지를 방문해야 합니다.herokuapp.com 를 클릭하여 브라우저의 데모를 일시적으로 잠금 해제합니다.이것에 의해, 개발자는 이 기능을 시험해 보고, 셀프 호스팅을 결정하거나 대체 기능을 찾을 수 있습니다.
CORS Anywhere는 프록시 요청에 CORS 헤더를 추가하는 node.js 프록시입니다.
API를 사용하려면 URL 앞에 API URL을 붙입니다(지원: github 저장소 참조).
필요에 따라서, 도메인간 요구를 자동적으로 유효하게 하는 경우는, 다음의 스니펫을 사용합니다.
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
출처 불문
원본은 교차 도메인 jsonp 액세스입니다.이것은 anyorigin.com을 대체하는 오픈소스입니다.
google.com 에서 데이터를 취득하려면 , 다음의 스니펫을 사용합니다.
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
CORS 프록시
CORS Proxy는 임의의 웹사이트에 대한 CORS 요청을 활성화하기 위한 단순한 node.js 프록시입니다.사이트상의 Javascript 코드가, 같은 발신기지 정책에 의해서 통상 차단되는 다른 도메인의 리소스에 액세스 할 수 있도록 합니다.
어떻게 작동합니까?CORS 프록시는 HTML 5와 함께 추가된 기능인 Cross-Origin Resource Sharing을 활용합니다.서버는 브라우저가 자신이 호스팅하는 리소스를 다른 웹 사이트에서 요청할 수 있도록 지정할 수 있습니다.CORS Proxy는 HTTP Proxy로, 응답에 「누구나 이것을 요구할 수 있습니다」라고 하는 헤더를 추가합니다.
이것은 목표를 달성하기 위한 또 다른 방법입니다(www.corsproxy.com 참조).프록시되는 URL에서 http:// 및 www.를 제거하고 URL 앞에 다음 URL을 추가합니다.www.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
http://www.corsproxy.com/사용 없음.
CORS 프록시 브라우저
최근에 발견한 것은 다양한 보안 지향 Cross Origin Remote Sharing 유틸리티입니다.그러나 플래시를 백엔드로 사용하는 블랙박스입니다.
동작은 이쪽에서 보실 수 있습니다.CORS 프록시 브라우저
GitHub의 소스 코드를 가져옵니다: koto/cors-proxy-browser
jQuery 플러그인은 Ajax-cross-origin을 사용할 수 있습니다.이 플러그인으로jQuery.ajax()크로스 도메인이를 위해 Google 서비스를 사용합니다.
AJAX Cross Origin 플러그인은 jSONP가 구현되지 않은 프록시 jSON getter로 Google Apps Script를 사용합니다.crossOrigin 옵션을 true로 설정하면 플러그인은 원래 URL을 Google Apps Script 주소로 대체하고 인코딩된 URL 매개 변수로 전송합니다.Google Apps Script는 Google 서버 리소스를 사용하여 원격 데이터를 가져온 후 JSONP로 클라이언트에 반환합니다.
사용법은 매우 간단합니다.
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
자세한 것은, http://www.ajax-cross-origin.com/ 를 참조해 주세요.
외부 사이트가 JSONP 또는 CORS를 지원하지 않는 경우 프록시를 사용하는 방법밖에 없습니다.
서버에서 해당 내용을 요청하는 스크립트를 작성한 후 jQuery ajax를 사용하여 서버의 스크립트를 누릅니다.
이것을 PHP 페이지의 헤더에 넣으면 API가 없으면 동작하지 않습니다.
header('Access-Control-Allow-Origin: *'); //allow everybody
또는
header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain
또는
$http_origin = $_SERVER['HTTP_ORIGIN']; //allow multiple domains
$allowed_domains = array(
'http://codesheet.org',
'http://stackoverflow.com'
);
if (in_array($http_origin, $allowed_domains))
{
header("Access-Control-Allow-Origin: $http_origin");
}
제가 지금 직면하고 있는 것과 같은 문제에 직면할 경우를 대비해서 글을 올립니다.ZebraNet 프린트 서버를 탑재한 Zebra 서멀 프린터를 사용하고 있습니다.이 서버는 HTML 기반의 사용자 인터페이스를 통해 여러 설정을 편집하거나 프린터의 현재 상태를 확인할 수 있습니다.ZebraNet 서버가 제공하는 html 페이지 중 하나에 표시되는 프린터의 상태, 예를 들어 브라우저에서 사용자에게 보내는 메시지 등을 취득해야 합니다.그 html 페이지를 Javascript로 먼저 가져와야 한다는 뜻입니다.프린터가 사용자의 PC의 LAN 내에 있지만, 같은 오리진 정책이 여전히 제 발목을 잡고 있습니다.JSONP를 시도했지만 서버가 html을 반환하고 기능을 변경할 방법을 찾지 못했습니다(가능한 경우 매직헤더 Access-control-allow-origin: *를 이미 설정했을 것입니다).그래서 저는 C#에 작은 콘솔 앱을 쓰기로 했습니다.정상적으로 동작하려면 Admin으로 실행해야 합니다.그렇지 않으면 :D 예외가 트롤 됩니다.다음은 몇 가지 코드입니다.
// Create a listener.
HttpListener listener = new HttpListener();
// Add the prefixes.
//foreach (string s in prefixes)
//{
// listener.Prefixes.Add(s);
//}
listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
//because the printer is accessible only within the LAN (no portforwarding)
listener.Start();
Console.WriteLine("Listening...");
// Note: The GetContext method blocks while waiting for a request.
HttpListenerContext context;
string urlForRequest = "";
HttpWebRequest requestForPage = null;
HttpWebResponse responseForPage = null;
string responseForPageAsString = "";
while (true)
{
context = listener.GetContext();
HttpListenerRequest request = context.Request;
urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
Console.WriteLine(urlForRequest);
//Request for the html page:
requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
responseForPage = (HttpWebResponse)requestForPage.GetResponse();
responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();
// Obtain a response object.
HttpListenerResponse response = context.Response;
// Send back the response.
byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
// Get a response stream and write the response to it.
response.ContentLength64 = buffer.Length;
response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
System.IO.Stream output = response.OutputStream;
output.Write(buffer, 0, buffer.Length);
// You must close the output stream.
output.Close();
//listener.Stop();
사용자가 해야 할 일은 콘솔 앱을 Admin으로 실행하는 것입니다.나도 알아...번거롭고 복잡하지만 서버를 변경할 수 없는 경우의 도메인 정책 문제에 대한 일종의 회피책입니다.
edit: JS에서 간단한 Ajax 콜을 발신합니다.
$.ajax({
type: 'POST',
url: 'http://LAN_IP:1234/http://google.com',
success: function (data) {
console.log("Success: " + data);
},
error: function (e) {
alert("Error: " + e);
console.log("Error: " + e);
}
});
요청된 페이지의 html이 반환되어 데이터 변수에 저장됩니다.
jherax가 제안하는 대로 로컬 프록시를 사용하여 외부 사이트에서 데이터를 가져오려면 각각의 외부 URL에서 콘텐츠를 가져오는 php 페이지를 만들고 해당 php 페이지로 get 요청을 보냅니다.
var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
alert(req.responseText);
}
php 프록시로서 https://github.com/cowboy/php-simple-proxy 를 사용할 수 있습니다.
의 ★★★★★★★★★★★★★★★★★.URL현재는 동작하지 않지만, 다음의 솔루션에서 코드를 갱신할 수 있습니다.
var url = "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute";
url = 'https://google.com'; // TEST URL
$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
$('div.ajax-field').html(data);
});<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>브라우저에서 적절한 CORS 헤더를 사용하여 요청된 서비스로 요청을 대행하는 CORS 프록시가 필요합니다.이러한 서비스의 일람은, 이하의 코드 스니펫에 기재되어 있습니다.제공된 코드 스니펫을 실행하여 사용자의 위치에서 이러한 서비스에 대한 ping을 확인할 수도 있습니다.
$('li').each(function() {
var self = this;
ping($(this).text()).then(function(delta) {
console.log($(self).text(), delta, ' ms');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
<li>https://crossorigin.me/</li>
<li>https://cors-anywhere.herokuapp.com/</li>
<li>http://cors.io/</li>
<li>https://cors.5apps.com/?uri=</li>
<li>http://whateverorigin.org/get?url=</li>
<li>https://anyorigin.com/get?url=</li>
<li>http://corsproxy.nodester.com/?src=</li>
<li>https://jsonp.afeld.me/?url=</li>
<li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>알아냈어.대신 이걸 썼어.
$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');
언급URL : https://stackoverflow.com/questions/15005500/loading-cross-domain-endpoint-with-ajax
'source' 카테고리의 다른 글
| 중력 형태 오류 (0) | 2023.02.16 |
|---|---|
| jQuery - Ajax 경유로 JSON을 PUT하는 방법 (0) | 2023.02.16 |
| "각도가 정의되지 않음"의 원인은 무엇입니까? (0) | 2023.02.12 |
| WooCommerce 모든 제품을 카트에서 삭제하고 현재 제품을 카트에 추가합니다. (0) | 2023.02.12 |
| 각도에서의 스코프 문제각도 사용 JSUI 부트스트랩모달 (0) | 2023.02.12 |