CORS POST 요청은 일반 JavaScript에서 작동하지만 jQuery에서는 작동하지 않는 이유는 무엇입니까?

CORS POST 요청은 일반 JavaScript에서 작동하지만 jQuery에서는 작동하지 않는 이유는 무엇입니까?

Cross Origin 포스트 요청을 하려고 하는데, 쉽게 작동했습니다.JavaScript다음과 같이:

var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);

하지만 저는 사용하고 싶습니다.jQuery하지만 작동이 안 돼요제가 시도하고 있는 것은 이것입니다.

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

이 경우 실패가 발생합니다.이유를 아는 사람이 있다면,jQuery작동하지 않습니다. 모두에게 알려주십시오.감사해요.

(사용 중입니다.jQuery1.5.1 및 Firefox 4.0, 그리고 내 서버가 적절한 응답을 하고 있습니다.Access-Control-Allow-Origin머리글)

업데이트: TimK가 지적했듯이 jquery 1.5.2에서는 더 이상 필요하지 않습니다.그러나 사용자 지정 헤더를 추가하거나 자격 증명(사용자 이름, 암호 또는 쿠키 등) 사용을 허용하려면 계속 읽어 보십시오.

---

답을 찾은 것 같아요! (4시간 후에 많은 욕)

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

허용할 모든 헤더를 수동으로 지정해야 합니다(적어도 FF 4.0 및 Chrome 10.0.648.204의 경우에는 그랬다).

jQuery의 $.ajax 메서드는 모든 교차 도메인 요청에 대해 "x-requested-with" 헤더를 보냅니다(내 생각에는 유일한 교차 도메인입니다).

OPTIONS 요청에 응답하는 데 필요한 누락 헤더는 다음과 같습니다.

//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);
}

또 다른 가능성은 설정이dataType: jsonJQuery가 다음을 전송하도록 합니다.Content-Type: application/json표제의이 헤더는 CORS에 의해 비표준 헤더로 간주되며, CORS 비행 전 요청이 필요합니다.몇 가지 시도해 볼 것이 있습니다.

적절한 비행 전 응답을 보내도록 서버를 구성해 보십시오.이것은 다음과 같은 추가 헤더의 형태가 될 것입니다.Access-Control-Allow-Methods그리고.Access-Control-Allow-Headers.

드롭 더dataType: json설정JQuery가 요청해야 합니다.Content-Type: application/x-www-form-urlencoded기본적으로, 하지만 만약을 위해, 당신은 대체할 수 있습니다.dataType: json와 함께contentType: 'application/x-www-form-urlencoded'

js로 "params"를 보내고 있습니다.request.send(params);

하지만 jquery의 "data".데이터가 정의되어 있습니까?data:data,

또한 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 답변을 기반으로 검색을 해보니 추가해야 합니다.Access-Control-Allow-Headers: Content-Type(제목은 전체 단락)

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

CORS 작동 방식

CORS는 플래시의 crossdomain.xml 파일과 매우 유사하게 작동합니다.기본적으로 브라우저는 HTTP 헤더 오리진을 요청 서버로 설정하여 교차 도메인 요청을 서비스로 보냅니다.서비스에는 이러한 요청이 허용되는지 여부를 나타내는 Access-Control-Allow-Origin과 같은 몇 가지 헤더가 포함되어 있습니다.

BOSH 연결 관리자의 경우 Access-Control-Allow-Origin 값을 *로 설정하여 모든 오리진이 허용되도록 지정하기에 충분합니다.내용 유형 헤더는 또한 액세스-제어-허용-헤더 헤더에 화이트리스트에 있어야 합니다.

마지막으로 BOSH 연결 관리자 요청을 포함한 특정 유형의 요청에 대해 권한 검사가 사전에 실행됩니다.브라우저는 OPTIONS 요청을 수행하고 허용되는 오리진, 허용되는 메서드 및 이 인증이 지속되는 기간을 나타내는 일부 HTTP 헤더를 반환합니다.예를 들어 OPTIONS에 대해 반환한 펀자브 및 ejabberd 패치는 다음과 같습니다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

Cors는 완료되기 전에 요청 방법을 POST에서 OPTIONS로 변경하므로, 당신의 게시 데이터는 전송되지 않습니다.이 cors 문제를 처리하는 방법은 OPTIONS 방법을 지원하지 않는 Ajax로 요청을 수행하는 것입니다.예제 코드:

        $.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", "*");

다음 방법으로 Jquery를 수정합니다.

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

언급URL : https://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery