[JQUERY] CORS POST 요청을 jQuery를 함께 일반 자바 스크립트에서 작동하지만, 왜?

CORS POST 요청을 jQuery를 함께 일반 자바 스크립트에서 작동하지만, 왜?

해결법

1. ---

   1.UPDATE :로 TimK이는 더 이상 JQuery와 1.5.2 필요하지 않습니다 지적했다. 당신이 (등 사용자 이름, 암호, 또는 쿠키) 자격 증명의 사용을 사용자 정의 헤더를 추가하거나 허용 할 경우에, 읽어.

   UPDATE :로 TimK이는 더 이상 JQuery와 1.5.2 필요하지 않습니다 지적했다. 당신이 (등 사용자 이름, 암호, 또는 쿠키) 자격 증명의 사용을 사용자 정의 헤더를 추가하거나 허용 할 경우에, 읽어.

   나는 답을 찾은 것 같아! (4 시간 이상 저주 많은)

   //This does not work!!
   Access-Control-Allow-Headers: *
   

   수동 수락 모든 헤더를 지정해야합니다 (FF 4.0 & 크롬 10.0.648.204에서 나를 위해 사건이었다 그 이상).

   jQuery의 $ 아약스 방법은이 "X가 요청한-에"모든 도메인 간 요청 헤더 (내가 유일한 크로스 도메인을 생각) 보냅니다.

   옵션 요청에 응답하는 데 필요한 누락 된 헤더는 그래서 :

   //no longer needed as of jquery 1.5.2
   Access-Control-Allow-Headers: x-requested-with
   

   당신이 아닌 "간단한"헤더를 전달하는 경우 목록에 포함해야합니다 (내가 하나 더 보낼 수) :

   //only need part of this for my custom header
   Access-Control-Allow-Headers: x-requested-with, x-requested-by
   

   그래서 그것을 모두 함께 넣어, 여기 내 PHP는 :

   // * wont work in FF w/ Allow-Credentials
   //if you dont need Allow-Credentials, * seems to work
   header('Access-Control-Allow-Origin: http://www.example.com');
   //if you need cookies or login etc
   header('Access-Control-Allow-Credentials: true');
   if ($this->getRequestMethod() == 'OPTIONS')
   {
     header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
     header('Access-Control-Max-Age: 604800');
     //if you need special headers
     header('Access-Control-Allow-Headers: x-requested-with');
     exit(0);
   }
   

2. ---

   2.또 다른 가능성은 설정 데이터 형식입니다 : JSON은 콘텐츠 형식을 보내 JQuery와 원인 : 응용 프로그램 / JSON 헤더입니다. 이 CORS하여 비 표준 헤더로 간주하고, CORS 프리 플라이트 요청이 필요합니다. 시도 몇 가지 그래서 :

   또 다른 가능성은 설정 데이터 형식입니다 : JSON은 콘텐츠 형식을 보내 JQuery와 원인 : 응용 프로그램 / JSON 헤더입니다. 이 CORS하여 비 표준 헤더로 간주하고, CORS 프리 플라이트 요청이 필요합니다. 시도 몇 가지 그래서 :

   1) 적절한 프리 플라이트 응답을 보내는 서버를 구성하십시오. 이는 Access-Control-Allow-방법 및 액세스 제어 - 허용 - 헤더 같은 추가 헤더의 형태로 될 것입니다.

   JSON 설정 : 2) 데이터 유형을 삭제합니다. JQuery와 콘텐츠 형식을 요청해야합니다 : contentType이와 JSON : 응용 프로그램 / 기본적으로 x-www-form-urlencoded를, 그러나 다만 확실하게, 당신은 데이터 유형을 대체 할 수있는 '응용 프로그램 / x-www-form-urlencoded를'

3. ---

   3.당신은 JS에서 "PARAMS"를 보내고있다 : (PARAMS)를 request.send;

   당신은 JS에서 "PARAMS"를 보내고있다 : (PARAMS)를 request.send;

   하지만 "데이터" "JQuery와에가. 데이터를 정의? 데이터 : 데이터,

   또한, 당신은 URL에 오류가 있습니다 :

   $.ajax( {url:url,
            type:"POST",
            dataType:"json",
            data:data, 
            success:function(data, textStatus, jqXHR) {alert("success");},
            error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
   });
   

   당신은 $ .post에 대한 하나의 구문을 믹싱

   업데이트 : monsur 답변에 따라 주위에 인터넷 검색을했다, 그리고 난 당신이 액세스 제어 - 허용 - 헤더를 추가 할 필요가 있음을 발견 콘텐츠 형식 (아래 전체 단락입니다)

   http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

4. ---

   4.이 POST에서 옵션, 완료되기 전에 CORS 때문에, 귀하의 게시물 데이터가 전송되지 않습니다 요청 방법을 변경합니다. 이 고르 문제를 처리하기 위해 노력하는 방법은, 옵션 메서드를 지원하지 않습니다 아약스와 요청을 수행하고 있습니다. 예제 코드 :

   이 POST에서 옵션, 완료되기 전에 CORS 때문에, 귀하의 게시물 데이터가 전송되지 않습니다 요청 방법을 변경합니다. 이 고르 문제를 처리하기 위해 노력하는 방법은, 옵션 메서드를 지원하지 않습니다 아약스와 요청을 수행하고 있습니다. 예제 코드 :

           $.ajax({
               type: "POST",
               crossdomain: true,
               url: "http://localhost:1415/anything",
               dataType: "json",
               data: JSON.stringify({
                   anydata1: "any1",
                   anydata2: "any2",
               }),
               success: function (result) {
                   console.log(result)
               },
               error: function (xhr, status, err) {
                   console.error(xhr, status, err);
               }
           });
   

   C #을 서버에서이 헤더 :

                       if (request.HttpMethod == "OPTIONS")
                       {
                             response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");
                             response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                             response.AddHeader("Access-Control-Max-Age", "1728000");
                       }
                       response.AppendHeader("Access-Control-Allow-Origin", "*");
   

5. ---

   5.다음과 같은 방법으로 jQuery를 수정합니다 :

   다음과 같은 방법으로 jQuery를 수정합니다 :

   $.ajax({
               url: someurl,
               contentType: 'application/json',
               data: JSONObject,
               headers: { 'Access-Control-Allow-Origin': '*' }, //add this line
               dataType: 'json',
               type: 'POST',                
               success: function (Data) {....}
   });
   

from https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery by cc-by-sa and MIT license