[javascript] JavaScript를 통해 도메인 간 POST 요청을 보내려면 어떻게합니까?

업데이트 : 계속하기 전에 모든 사람이 CORS에 대한 html5rocks 튜토리얼 을 읽고 이해해야합니다 . 이해하기 쉽고 매우 명확합니다.

POST중인 서버를 제어하는 ​​경우 서버에서 응답 헤더를 설정하여 “Cross-Origin Resource Sharing 표준”을 활용하십시오. 이 답변은이 스레드의 다른 답변에서 논의되지만 내 의견으로는 명확하지 않습니다.

간단히 말해서 from.com/1.html에서 to.com/postHere.php (예를 들어 PHP를 사용하여)로 교차 도메인 POST를 수행하는 방법이 있습니다. 참고 : Access-Control-Allow-OriginNON OPTIONS요청에 대해서만 설정하면됩니다. 이 예에서는 항상 더 작은 코드 스 니펫에 대해 모든 헤더를 설정합니다.

1. postHere.php 설정에서 다음을 수행하십시오.

   switch ($_SERVER['HTTP_ORIGIN']) {
       case 'http://from.com': case 'https://from.com':
       header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
       header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
       header('Access-Control-Max-Age: 1000');
       header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
       break;
   }

   이를 통해 스크립트가 도메인 간 POST, GET 및 OPTIONS를 만들 수 있습니다. 계속 읽으면서 이것은 분명해질 것입니다 …

2. JS에서 교차 도메인 POST를 설정하십시오 (jQuery 예).

   $.ajax({
       type: 'POST',
       url: 'https://to.com/postHere.php',
       crossDomain: true,
       data: '{"some":"json"}',
       dataType: 'json',
       success: function(responseData, textStatus, jqXHR) {
           var value = responseData.someKey;
       },
       error: function (responseData, textStatus, errorThrown) {
           alert('POST failed.');
       }
   });

2 단계에서 POST를 수행하면 브라우저는 서버에 “OPTIONS”메소드를 보냅니다. 이것은 서버에서 POST하는 동안 서버가 멋진 지 확인하기 위해 브라우저에서 “스 니프”입니다. 요청이 ” http://from.com “또는 ” https://from.com ” 에서 시작된 경우 서버는 “Access-Control-Allow-Origin”으로 응답하여 브라우저에게 POST | GET | ORIGIN에 OK를 알려줍니다 . 서버에 문제가 없으므로 브라우저는 두 번째 요청을합니다 (이번에는 POST). 클라이언트가 전송하는 컨텐츠 유형을 설정하도록하는 것이 좋습니다. 따라서이를 허용해야합니다.

MDN은 전체 흐름이 어떻게 작동하는지 자세히 설명하는 HTTP 액세스 제어 에 대한 훌륭한 글을 작성했습니다 . 문서에 따르면 “사이트 간 XMLHttpRequest를 지원하는 브라우저에서 작동”해야합니다. 그러나 현대 브라우저 만 도메인 간 POST를 허용 한다고 생각하기 때문에 약간 오해의 소지가 있습니다. 나는 이것이 사파리, 크롬, FF 3.6에서만 작동하는지 확인했습니다.

이렇게하면 다음을 명심하십시오.

1. 서버는 작업 당 2 개의 요청을 처리해야합니다.
2. 보안 관련 사항에 대해 생각해야합니다. ‘Access-Control-Allow-Origin : *’과 같은 작업을 수행하기 전에주의하십시오.
3. 모바일 브라우저에서는 작동하지 않습니다. 내 경험상 그들은 도메인 간 POST를 전혀 허용하지 않습니다. 나는 안드로이드, 아이 패드, 아이폰을 테스트했다
4. FF <3.6에는 서버가 400이 아닌 응답 코드를 반환하고 응답 본문 (예 : 유효성 검사 오류)이있는 경우 FF 3.6은 응답 본문을 얻지 못하는 꽤 큰 버그가 있습니다. 좋은 REST 사례를 사용할 수 없기 때문에 이것은 엉덩이에 큰 고통입니다. 여기에 버그를 참조 하십시오 (jQuery에 제출되었지만 FF 버그라고 생각합니다-FF4에서 수정 된 것으로 보입니다).
5. OPTION 요청뿐만 아니라 항상 위의 헤더를 반환하십시오. FF는 POST의 응답으로 필요합니다.

답변

function crossDomainPost() {
  // Add the iframe with a unique name
  var iframe = document.createElement("iframe");
  var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;

  // construct a form with hidden inputs, targeting the iframe
  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://INSERT_YOUR_URL_HERE";
  form.method = "POST";

  // repeat for each parameter
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
  input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
}

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 // create hidden inputs, add them
 // not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

$.ajax({
        type: "POST",
        url: "http://www.yoururl.com/",
        crossDomain: true,
        data: 'param1=value1&param2=value2',
        success: function (data) {
            // do something with server response data
        },
        error: function (err) {
            // handle your error logic here
        }
    });

header('Access-Control-Allow-Origin: *');

function xmlrpc_server_output($xml) {
    $xml = '<?xml version="1.0"?>'."\n". $xml;
    header('Connection: close');
    header('Content-Length: '. strlen($xml));
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/x-www-form-urlencoded');
    header('Date: '. date('r'));
    // $xml = str_replace("\n", " ", $xml); 

    echo $xml;
    exit;
}