[JQUERY] (CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법

(CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법

해결법

1. ---

   1.나는 마지막으로이 링크 우연히 "일반 자바 스크립트에서 CORS POST 요청 작동하지만 왜 jQuery로?" 그 jQuery를 1.5.1이를 추가하는 노트

   나는 마지막으로이 링크 우연히 "일반 자바 스크립트에서 CORS POST 요청 작동하지만 왜 jQuery로?" 그 jQuery를 1.5.1이를 추가하는 노트

    Access-Control-Request-Headers: x-requested-with
   

   모든 CORS 요청에 헤더. jQuery를 1.5.2이 작업을 수행하지 않습니다. 또한, 서버의 응답 헤더를 설정 동일한 질문에 따라

   Access-Control-Allow-Headers: *
   

   응답이 계속 허용하지 않습니다. 당신은 응답 헤더가 특별히 필요한 헤더를 포함 확인해야합니다. 즉 :

   Access-Control-Allow-Headers: x-requested-with 
   

2. ---

   2.의뢰:

   의뢰:

    $.ajax({
               url: "http://localhost:8079/students/add/",
               type: "POST",
               crossDomain: true,
               data: JSON.stringify(somejson),
               dataType: "json",
               success: function (response) {
                   var resp = JSON.parse(response)
                   alert(resp.status);
               },
               error: function (xhr, status) {
                   alert("error");
               }
           });
   

   응답:

   response = HttpResponse(json.dumps('{"status" : "success"}'))
   response.__setitem__("Content-type", "application/json")
   response.__setitem__("Access-Control-Allow-Origin", "*")
   
   return response
   

3. ---

   3.JQuery와 아약스 내 요청 헤더를 설정하여 구글 거리 매트릭스 API를 사용할 때 나는 내 자신의 문제를 해결했다. 아래를보십시오.

   JQuery와 아약스 내 요청 헤더를 설정하여 구글 거리 매트릭스 API를 사용할 때 나는 내 자신의 문제를 해결했다. 아래를보십시오.

   var settings = {
             'cache': false,
             'dataType': "jsonp",
             "async": true,
             "crossDomain": true,
             "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
             "method": "GET",
             "headers": {
                 "accept": "application/json",
                 "Access-Control-Allow-Origin":"*"
             }
         }
   
         $.ajax(settings).done(function (response) {
             console.log(response);
   
         });
   

   내가 설정에 추가 된 것을 참고 **

   "headers": {
             "accept": "application/json",
             "Access-Control-Allow-Origin":"*"
         }
   

   ** 이게 도움이 되길 바란다.

4. ---

   4.나에게 해결책을 찾기 위해 약간의 시간이 걸렸습니다.

   나에게 해결책을 찾기 위해 약간의 시간이 걸렸습니다.

   경우 서버 올바르게 응답과 요청이 문제가, 당신은 withCredentials을 추가해야합니다 : 진정한 요청의 xhrFields에 :

   $.ajax({
       url: url,
       type: method,
       // This is the important part
       xhrFields: {
           withCredentials: true
       },
       // This is the important part
       data: data,
       success: function (response) {
           // handle the response
       },
       error: function (xhr, status) {
           // handle errors
       }
   });
   

5. ---

   5.그럼 난 주 동안이 문제로 고생.

   그럼 난 주 동안이 문제로 고생.

   이 작업을 수행하는 가장 쉽고 가장 준수 및 비 해키 방법은 아마도 브라우저를 기반으로 통화를하지 않고 크로스 원산지 요청을 처리 할 수있는 업체 자바 스크립트 API를 사용하는 것입니다.

   예를 들면 페이스 북 자바 스크립트 API와 구글 JS API를.

   경우 귀하의 API 제공자가 오래과 응답 크로스 원산지 자원 기원 '*'헤더를 지원하지 않습니다와 JS API를 (예 나는 당신에 대해 야후를 이야기하고있다)이없는, 당신은 세 가지 옵션 - 중 하나를 강타하고 있습니다

6. ---

   6.Laravel와 함께이를 사용하여 내 문제를 해결했다. 그냥 JQuery와 요청 액세스 제어 - 요청 헤더에이 헤더를 추가 : X-와-요청 및 확인 서버 측 응답이 헤더 세트 액세스 제어 - 허용 - 헤더가 있는지 확인 : *를.

   Laravel와 함께이를 사용하여 내 문제를 해결했다. 그냥 JQuery와 요청 액세스 제어 - 요청 헤더에이 헤더를 추가 : X-와-요청 및 확인 서버 측 응답이 헤더 세트 액세스 제어 - 허용 - 헤더가 있는지 확인 : *를.

7. ---

   7.이것은 나를 위해 일한 것을 요약 한 것입니다 :

   이것은 나를 위해 일한 것을 요약 한 것입니다 :

   새로운 기능 (포장 $ 아약스 단순화를) 정의 :

   jQuery.postCORS = function(url, data, func) {
     if(func == undefined) func = function(){};
     return $.ajax({
       type: 'POST', 
       url: url, 
       data: data, 
       dataType: 'json', 
       contentType: 'application/x-www-form-urlencoded', 
       xhrFields: { withCredentials: true }, 
       success: function(res) { func(res) }, 
       error: function() { 
               func({}) 
       }
     });
   }
   

   용법:

   $.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
         if(obj.ok) {
              ...
         }
   });
   

   또한되는 .done, .fail 등 작동 :

   $.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
         if(obj.ok) {
              ...
         }
   }).fail(function(){
       alert("Error!");
   });
   

   (example.com이 호스팅이 경우) 서버 측 (PHP에서 몇 가지 예제 코드를 추가)이 헤더를 설정 :

   header('Access-Control-Allow-Origin: https://not-example.com');
   header('Access-Control-Allow-Credentials: true');
   header('Access-Control-Max-Age: 604800');
   header("Content-type: application/json");
   $array = array("ok" => $_POST["x"]);
   echo json_encode($array);
   

   이것은 내가 JS에서 진정으로 POST 크로스 도메인에 알고있는 유일한 방법입니다.

   JSONP는 서버 로그에서 중요한 정보를 표시 할 수 있습니다 GET으로 POST를 변환합니다.

8. ---

   8.내가 여기에 응답 할 것이다, 그래서 어떤 이유로, GET 요청에 대한 질문이 하나와 합병했다.

   내가 여기에 응답 할 것이다, 그래서 어떤 이유로, GET 요청에 대한 질문이 하나와 합병했다.

   이 간단한 기능은 비동기 CORS 지원 페이지에서 HTTP 상태 응답을 얻을 것이다. GET 또는 POST 사용 여부 - 당신이 그것을 실행하면 XMLHttpRequest를 통해 액세스 할 경우 적절한 헤더 만 페이지가 200 개 상태를 반환 볼 수 있습니다. 아무것도 그냥 JSON 개체를 필요로하는 경우 가능 JSONP를 사용하는 것을 제외하고이 문제를 해결하기 위해 클라이언트 측에서 수행 할 수 없습니다.

   다음은 쉽게 xmlHttpRequestObject 객체에있는 데이터를 얻기 위해 수정 될 수있다 :

   함수 checkCorsSource (소스) { VAR xmlHttpRequestObject; 경우 (window.XMLHttpRequest) { xmlHttpRequestObject 새로운 인 XMLHttpRequest () =; 경우 (xmlHttpRequestObject! = NULL) { VAR sUrl = ""; 경우 (소스 == "구글") { VAR sUrl = "https://www.google.com"; } 다른 { VAR sUrl = "https://httpbin.org/get"; } . document.getElementById를 ( "txt1") = innerHTML을 「리퀘스트 전송 ... "; xmlHttpRequestObject.open는 (사실 sUrl을 "GET"); xmlHttpRequestObject.onreadystatechange = 함수 () { 경우 (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) { . document.getElementById를 ( "txt1") innerHTML을는 = "200 응답이 수신"; } 다른 { . document.getElementById를 ( "txt1") innerHTML을은 = "200 응답 실패!"; } } xmlHttpRequestObject.send (); } 다른 { 는 Window.alert는 ( "오류는 XMLHttpRequest의 객체를 생성 클라이언트가되지 CORS가 활성화."); } } } <제목> 확인 페이지는 고르 인 경우

   은 CORS 지원 소스 중 하나를 가지고 다음과 같은 HTTP 헤더 :

   • 액세스 제어 - 허용 - 헤더 : *
   • 액세스 제어는--허용 헤더 : X-요청-와 로 페이지가 CORS 허용하는 경우

     확인 버튼을 클릭하여

     <= 값의 onclick = "Google 페이지 확인" "인 btn1"입력 타입 = "버튼"NAME = "("구글) checkCorsSource "> <값 "인 btn1"입력 타입 = "버튼"이름 =의 onclick = "고르 페이지 확인" "checkCorsSource ( '고르')를">

   • ---

     9.결과가 없습니다 위에서 나는 피곤 다 - 나는 JQuery와 아약스 나만 요청이 벌금을했다 GET, POST 요청에 대한 문제를 고르 준 동일한 문제를 가지고 있었다. 나는 JQuery와 바로 내 문제를 해결하는 대신 XMLHttpRequest의 사용을 통해 변경 등 내 서버에 올바른 헤더를 가지고 있었다. 나는 그것을 사용 JQuery와의 버전에 상관없이 그것을 해결되지 않았다. 또한 가져 오기 이전 버전과 브라우저 호환성을 필요로하지 않는 경우 문제없이 작동합니다.

     결과가 없습니다 위에서 나는 피곤 다 - 나는 JQuery와 아약스 나만 요청이 벌금을했다 GET, POST 요청에 대한 문제를 고르 준 동일한 문제를 가지고 있었다. 나는 JQuery와 바로 내 문제를 해결하는 대신 XMLHttpRequest의 사용을 통해 변경 등 내 서버에 올바른 헤더를 가지고 있었다. 나는 그것을 사용 JQuery와의 버전에 상관없이 그것을 해결되지 않았다. 또한 가져 오기 이전 버전과 브라우저 호환성을 필요로하지 않는 경우 문제없이 작동합니다.

             var xhr = new XMLHttpRequest()
             xhr.open('POST', 'https://mywebsite.com', true)
             xhr.withCredentials = true
             xhr.onreadystatechange = function() {
               if (xhr.readyState === 2) {// do something}
             }
             xhr.setRequestHeader('Content-Type', 'application/json')
             xhr.send(json)
     

     희망이 같은 문제를 가진 다른 사람이 도움이됩니다.

   • ---

     10.어떤 이유로 경우 헤더 또는 당신은 아직도 당신이 아파치 ProxyPass로 사용을 고려할 수 있습니다 효과가없고있는 설정 제어 정책을 추가하는 동안 ...

     어떤 이유로 경우 헤더 또는 당신은 아직도 당신이 아파치 ProxyPass로 사용을 고려할 수 있습니다 효과가없고있는 설정 제어 정책을 추가하는 동안 ...

     하나의 <가상 호스트>의 예를 들어 그 용도는 다음 두 지시어를 추가 SSL :

     SSLProxyEngine On
     ProxyPass /oauth https://remote.tld/oauth
     

     (a2enmod를 사용하여로드) 반드시 다음 아파치 모듈이로드되어 있는지 확인합니다 :

     분명히 당신은 아파치 프록시를 사용하기 위해 귀하의 AJAX 요청 URL을 변경해야 ...

   • ---

     11.이 파티에 조금 늦게,하지만 난 며칠 동안이 고민하고있다. 그것은 가능하고, 내가 여기에있는 답변을 아무도 일을 없다. 그것은 믿을 간단합니다. 여기에 아약스 호출입니다 :

     이 파티에 조금 늦게,하지만 난 며칠 동안이 고민하고있다. 그것은 가능하고, 내가 여기에있는 답변을 아무도 일을 없다. 그것은 믿을 간단합니다. 여기에 아약스 호출입니다 :

     <제목> 자바 스크립트 테스트 <스크립트 SRC = "http://code.jquery.com/jquery-latest.min.js"> <스크립트 유형 = "텍스트 / 자바 스크립트"> $ (문서) .domain = 'XXX.com'; $ (문서) .ready (함수 () { {(아약스 $ xhrFields : {고르 : 거짓} 입력 : "GET", "http://XXXX.com/test.php?email='steve@XXX.com '": 홈페이지 성공 : 기능 (데이터) { 경보 (데이터); }, 오류 : 함수 (X, Y, Z) { 경고 (x.responseText + ": EEE :"+ x.status); } }); });

     다음은 서버 측에서 PHP는 다음과 같습니다