jQuery $ .ajax (), $ .post ส่ง“ OPTIONS” เป็น REQUEST_METHOD ใน Firefox

มีปัญหากับสิ่งที่ฉันคิดว่าเป็นปลั๊กอิน jQuery ที่ค่อนข้างง่าย ...

ปลั๊กอินควรดึงข้อมูลจากสคริปต์ PHP ผ่าน Ajax <select>เพื่อเพิ่มตัวเลือกให้เป็น คำขอ ajax นั้นค่อนข้างทั่วไป:

$.ajax({
  url: o.url,
  type: 'post',
  contentType: "application/x-www-form-urlencoded",
  data: '{"method":"getStates", "program":"EXPLORE"}',
  success: function (data, status) {
    console.log("Success!!");
    console.log(data);
    console.log(status);
  },
  error: function (xhr, desc, err) {
    console.log(xhr);
    console.log("Desc: " + desc + "\nErr:" + err);
  }
});

ดูเหมือนว่าจะทำงานได้ดีใน Safari ใน Firefox 3.5 REQUEST_TYPEบนเซิร์ฟเวอร์จะเป็น 'OPTIONS' เสมอและข้อมูล $ _POST จะไม่ปรากฏขึ้น Apache บันทึกคำขอเป็นประเภท 'ตัวเลือก':

::1 - - [08/Jul/2009:11:43:27 -0500] "OPTIONS sitecodes.php HTTP/1.1" 200 46

ทำไมการโทร ajax นี้ทำงานใน Safari แต่ไม่ใช่ Firefox และฉันจะแก้ไขสำหรับ Firefox ได้อย่างไร

ส่วนหัวการตอบสนอง
วันที่: พุธ, 08 กรกฎาคม 2009 21:22:17 GMT
เซิร์ฟเวอร์: Apache / 2.0.59 (Unix) PHP / 5.2.6 DAV / 2
X-Powered-By: PHP / 5.2.6
ความยาวเนื้อหา 46
Keep-Alive timeout = 15, max = 100
การเชื่อมต่อ Keep-Alive
ข้อความ / html ประเภทเนื้อหา

ขอส่วนหัว
ลำดับของโฮสต์: 8888
User-Agent Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv: 1.9.1) Gecko / 20090624 Firefox / 3.5
ยอมรับ text / html, application / xhtml + xml, application / xml; q = 0.9, * / *; q = 0.8
ยอมรับภาษา en-us, en; q = 0.5
ยอมรับการเข้ารหัส gzip, ยุบ
Accept-Charset ISO-8859-1, utf-8; q = 0.7, *; q = 0.7
Keep-Alive 300
การเชื่อมต่อยังมีชีวิตอยู่
จุดเริ่มต้น http://ux.inetu.act.org
POST การควบคุมการเข้าถึงวิธีการ
การเข้าถึงการควบคุมคำขอ - ส่วนหัว x- ร้องขอด้วย

นี่คือรูปภาพของเอาต์พุต Firebug:

สาเหตุของข้อผิดพลาดคือนโยบายต้นทางเดียวกัน ช่วยให้คุณสามารถทำ XMLHTTPRequests ไปยังโดเมนของคุณเอง ดูว่าคุณสามารถใช้การโทรกลับJSONPแทน:

$.getJSON( 'http://<url>/api.php?callback=?', function ( data ) { alert ( data ); } );

ฉันใช้รหัสต่อไปนี้ทางด้าน Django เพื่อตีความคำขอ OPTIONS และตั้งค่าส่วนหัวควบคุมการเข้าถึงที่จำเป็น หลังจากนี้คำขอข้ามโดเมนของฉันจาก Firefox เริ่มทำงาน ดังที่ได้กล่าวมาก่อนเบราว์เซอร์จะส่งคำขอ OPTIONS ก่อนแล้วจึงส่ง POST / GET ทันที

def send_data(request):
    if request.method == "OPTIONS": 
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        response['Access-Control-Max-Age'] = 1000
        # note that '*' is not valid for Access-Control-Allow-Headers
        response['Access-Control-Allow-Headers'] = 'origin, x-csrftoken, content-type, accept'
        return response
    if request.method == "POST":
        # ... 

แก้ไข: ดูเหมือนว่าอย่างน้อยในบางกรณีคุณต้องเพิ่มส่วนหัวควบคุมการเข้าใช้เดียวกันในการตอบสนองจริง สิ่งนี้อาจสร้างความสับสนเล็กน้อยเนื่องจากคำขอดูเหมือนจะประสบความสำเร็จ แต่ Firefox ไม่ผ่านเนื้อหาของการตอบสนองต่อ Javascript

นี้ บทความ Mozilla ศูนย์นักพัฒนาอธิบายสถานการณ์คำขอข้ามโดเมนต่างๆ ดูเหมือนว่าบทความจะระบุว่าคำขอ POST ที่มีประเภทเนื้อหาของ 'application / x-www-form-urlencoded' ควรส่งเป็น 'คำของ่าย' (โดยไม่มีการร้องขอ OPTIONS ล่วงหน้า) อย่างไรก็ตามฉันพบว่า Firefox ส่งคำขอ OPTIONS ถึงแม้ว่า POST ของฉันจะถูกส่งด้วยประเภทเนื้อหานั้น

ฉันสามารถทำงานนี้ได้โดยสร้างตัวจัดการคำขอตัวเลือกบนเซิร์ฟเวอร์ที่ตั้งค่าส่วนหัวการตอบสนอง 'Access-Control-Allow-Origin' เป็น '*' คุณสามารถเข้มงวดมากขึ้นด้วยการตั้งค่าเป็นบางอย่างที่เฉพาะเจาะจงเช่น ' http://someurl.com ' นอกจากนี้ฉันได้อ่านแล้วสมมุติว่าคุณสามารถระบุรายการที่คั่นด้วยเครื่องหมายจุลภาคของต้นกำเนิดหลายรายการ แต่ฉันไม่สามารถใช้มันได้

เมื่อ Firefox ได้รับการตอบสนองต่อคำขอ OPTIONS ด้วยค่าที่ยอมรับได้ 'Access-Control-Allow-Origin' ก็จะส่งคำขอ POST

ฉันได้แก้ไขปัญหานี้โดยใช้โซลูชันที่ใช้ Apache ทั้งหมด ใน vhost / htaccess ของฉันฉันใส่บล็อกต่อไปนี้:

# enable cross domain access control
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"

# force apache to return 200 without executing my scripts
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

คุณอาจไม่ต้องการส่วนหลังขึ้นอยู่กับสิ่งที่เกิดขึ้นเมื่อ Apache ดำเนินการสคริปต์เป้าหมายของคุณ เครดิตไปที่กลุ่มServerFault ที่เป็นมิตรสำหรับส่วนหลัง

PHP ที่ด้านบนสุดของสคริปต์ตอบกลับนี้ใช้งานได้ (ด้วย Firefox 3.6.11 ฉันยังไม่ได้ทำการทดสอบมากมาย)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
    header('Access-Control-Allow-Headers: '
           . $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
    header('Access-Control-Allow-Headers: *');
}

if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
    exit(0);
}

ฉันมีปัญหาเดียวกันกับการส่งคำขอไปยังแผนที่ Google และวิธีการแก้ปัญหาค่อนข้างง่ายด้วย jQuery 1.5 - สำหรับการใช้ DataType dataType: "jsonp"

ผู้ร้ายคือคำขอ preflight โดยใช้วิธีการตัวเลือก

สำหรับวิธีการร้องขอ HTTP ที่อาจก่อให้เกิดผลข้างเคียงต่อข้อมูลผู้ใช้ (โดยเฉพาะอย่างยิ่งสำหรับวิธี HTTP อื่น ๆ นอกเหนือจาก GET หรือสำหรับการใช้งาน POST ที่มีประเภท MIME บางประเภท) ข้อมูลจำเพาะกำหนดว่าเบราว์เซอร์ "preflight" ร้องขอร้องขอวิธีการ เซิร์ฟเวอร์ที่มีวิธีการร้องขอ HTTP OPTIONS จากนั้นเมื่อ "การอนุมัติ" จากเซิร์ฟเวอร์ให้ส่งคำขอจริงด้วยวิธีการร้องขอ HTTP จริง

ข้อมูลจำเพาะทางเว็บหมายถึง: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

ฉันแก้ไขปัญหาโดยเพิ่มบรรทัดต่อไปนี้ใน Nginx conf

    location / {
               if ($request_method = OPTIONS ) {
                   add_header Access-Control-Allow-Origin  "*";
                   add_header Access-Control-Allow-Methods "POST, GET, PUT, UPDATE, DELETE, OPTIONS";
                   add_header Access-Control-Allow-Headers "Authorization";
                   add_header Access-Control-Allow-Credentials  "true";
                   add_header Content-Length 0;
                   add_header Content-Type text/plain;
                   return 200;
               }
    location ~ ^/(xxxx)$ {
                if ($request_method = OPTIONS) {
                    rewrite ^(.*)$ / last;
                }
    }

ฉันมองผ่านแหล่งที่มา 1.3.2 เมื่อใช้ JSONP คำขอทำโดยการสร้างองค์ประกอบ SCRIPT แบบไดนามิกซึ่งผ่านนโยบายเบราว์เซอร์โดเมนเดียวกัน โดยปกติคุณไม่สามารถทำการร้องขอ POST โดยใช้องค์ประกอบ SCRIPT เบราว์เซอร์จะดึงผลลัพธ์โดยใช้ GET

ในขณะที่คุณกำลังร้องขอการโทร JSONP องค์ประกอบ SCRIPT จะไม่ถูกสร้างขึ้นเพราะจะทำเช่นนี้เมื่อตั้งค่าการเรียกชนิด AJAX เป็น GET เท่านั้น

http://dev.jquery.com/ticket/4690

เรามีปัญหาเช่นนี้กับ ASP.Net IIS ของเราส่งคืนข้อผิดพลาดเซิร์ฟเวอร์ภายในเมื่อพยายามเรียกใช้ jQuery $.postเพื่อรับเนื้อหา html บางส่วนเนื่องจาก PageHandlerFactory ถูก จำกัด ให้ตอบกลับเฉพาะGET,HEAD,POST,DEBUGคำกริยาเท่านั้น ดังนั้นคุณสามารถเปลี่ยนข้อ จำกัด ที่เพิ่มคำกริยา "OPTIONS" ลงในรายการหรือเลือก "All Verbs"

คุณสามารถแก้ไขสิ่งนั้นใน IIS Manager ของคุณเลือกเว็บไซต์ของคุณจากนั้นเลือก Handler Mappings คลิกสองครั้งใน PageHandlerFactory ของคุณสำหรับไฟล์ * .apx ตามที่คุณต้องการ (เราใช้กลุ่มแอพพลิเคชั่นพร้อมกรอบ 4.0) คลิกที่ Request Restrictions จากนั้นไปที่ Verbs Tabn และปรับใช้ของคุณ

ตอนนี้$.postคำขอของเราทำงานตามที่คาดไว้ :)

ตรวจสอบว่ารูปแบบของactionURL รวมถึงส่วนหนึ่งของโดเมนในขณะที่หน้าเดิมที่คุณได้เปิดโดยไม่ต้องมีการดูwwwwww

ทำโดยทั่วไปสำหรับ URL ของ Canonical ..

ฉันพยายามหลายชั่วโมงก่อนจะสะดุดบทความนี้และพบคำใบ้ของ Cross Domain

ฉันดูเหมือนว่าถ้าo.url = 'index.php'และไฟล์นี้มีอยู่ก็โอเคและส่งกลับข้อความความสำเร็จในคอนโซล มันคืนข้อผิดพลาดถ้าฉันใช้ url:http://www.google.com

หากทำคำขอโพสต์ทำไมไม่ใช้โดยตรงกับวิธี$ .post :

$.post("test.php", { func: "getNameAndTime" },
    function(data){
        alert(data.name); // John
        console.log(data.time); //  2pm
    }, "json");

มันง่ายกว่ามาก

ฉันได้โพสต์ตัวอย่างที่ชัดเจนของวิธีแก้ปัญหานี้หากควบคุมรหัสเซิร์ฟเวอร์ของโดเมนที่คุณกำลังโพสต์อยู่ คำตอบนี้ถูกแตะต้องในหัวข้อนี้ แต่นี่อธิบายได้ชัดเจนยิ่งขึ้นว่า IMO

ฉันจะส่งคำขอ POST ข้ามโดเมนผ่าน JavaScript ได้อย่างไร

วิธีแก้ไขปัญหานี้คือ:

1. ใช้ dataType: json
2. เพิ่ม&callback=?ไปยัง URL ของคุณ

สิ่งนี้ใช้ได้กับการโทร Facebook API และด้วย Firefox Firebug ใช้GETแทนOPTIONSเงื่อนไขข้างต้น (ทั้งคู่)

ความเป็นไปได้อีกประการที่จะหลีกเลี่ยงปัญหาคือการใช้สคริปต์พรอกซี ตัวอย่างวิธีการนั้นได้อธิบายไว้ที่นี่

ลองทำสิ่งนี้ได้ไหม

contentType:application/x-www-form-urlencoded

ลองเพิ่มตัวเลือก:

dataType: "json"

 function test_success(page,name,id,divname,str)
{ 
 var dropdownIndex = document.getElementById(name).selectedIndex;
 var dropdownValue = document.getElementById(name)[dropdownIndex].value;
 var params='&'+id+'='+dropdownValue+'&'+str;
 //makerequest_sp(url, params, divid1);

 $.ajax({
    url: page,
    type: "post",
    data: params,
    // callback handler that will be called on success
    success: function(response, textStatus, jqXHR){
        // log a message to the console
        document.getElementById(divname).innerHTML = response;

        var retname = 'n_district';
        var dropdownIndex = document.getElementById(retname).selectedIndex;
        var dropdownValue = document.getElementById(retname)[dropdownIndex].value;
        if(dropdownValue >0)
        {
            //alert(dropdownValue);
            document.getElementById('inputname').value = dropdownValue;
        }
        else
        {
            document.getElementById('inputname').value = "00";
        }
        return;
        url2=page2; 
        var params2 = parrams2+'&';
        makerequest_sp(url2, params2, divid2);

     }
});         
}

ฉันมีปัญหาคล้ายกันกับการพยายามใช้ Facebook API

contentType เท่านั้นที่ไม่ได้ส่งคำขอ preflighted ดูเหมือนจะเป็นเพียงข้อความ / ธรรมดา ... ไม่ใช่พารามิเตอร์ที่เหลือที่กล่าวถึงที่ mozilla ที่นี่

• ทำไมนี่เป็นเบราว์เซอร์เดียวเท่านั้นที่ทำสิ่งนี้
• เหตุใด Facebook จึงไม่รู้จักและยอมรับคำขอ preflight

FYI: เอกสารของ Moz ดังกล่าวชี้ให้เห็นว่าส่วนหัวของ X-Lori ควรเรียกใช้การร้องขอแบบ preflighted ... มันไม่ได้

คุณต้องทำงานด้านเซิร์ฟเวอร์ ฉันเห็นว่าคุณกำลังใช้ PHP ทางฝั่งเซิร์ฟเวอร์ แต่โซลูชันสำหรับ. NET เว็บแอปพลิเคชันอยู่ที่นี่: ไม่สามารถตั้งค่าประเภทเนื้อหาเป็น 'application / json' ใน jQuery.ajax

ทำเช่นเดียวกันในสคริปต์ PHP และมันจะทำงาน เพียงแค่: ที่เบราว์เซอร์คำขอแรกคือการถามเซิร์ฟเวอร์หากได้รับอนุญาตให้ส่งข้อมูลดังกล่าวด้วยประเภทดังกล่าวและคำขอที่สองคือเหมาะสม / ได้รับอนุญาต

ลองเพิ่มสิ่งต่อไปนี้:

dataType: "json",
ContentType: "application/json",
data: JSON.stringify({"method":"getStates", "program":"EXPLORE"}),  

ฉันใช้ url proxy เพื่อแก้ไขปัญหาที่คล้ายกันเมื่อฉันต้องการโพสต์ข้อมูลไปยัง apache solr ที่โฮสต์ในเซิร์ฟเวอร์อื่น (นี่อาจไม่ใช่คำตอบที่สมบูรณ์ แต่แก้ปัญหาของฉันได้)

ติดตาม URL นี้: การใช้โหมดการเขียนซ้ำสำหรับการพร็อกซี่ฉันเพิ่มบรรทัดนี้ใน httpd.conf ของฉัน:

 RewriteRule ^solr/(.*)$ http://ip:8983/solr$1 [P]

ดังนั้นฉันสามารถโพสต์ข้อมูลไปที่ / solr แทนที่จะโพสต์ข้อมูลไปที่http: // ip: 8983 / solr / * จากนั้นมันจะโพสต์ข้อมูลในแหล่งกำเนิดเดียวกัน

ฉันมีรหัสนี้จัดการสถานการณ์ cors ของฉันได้ดีใน php:

header( 'Access-Control-Allow-Origin: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Headers: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Credentials: true' );

และมันก็ใช้งานได้ดีในพื้นที่และจากระยะไกล แต่ไม่ใช่สำหรับการอัปโหลดเมื่อระยะไกล

มีบางอย่างเกิดขึ้นกับ apache / php หรือรหัสของฉันฉันไม่รำคาญที่จะค้นหามันเมื่อคุณร้องขอ OPTIONS มันส่งคืนหัวข้อของฉันด้วยกฎ cors แต่มีผลลัพธ์ 302 รายการ ดังนั้นเบราว์เซอร์ของฉันจึงไม่รับรู้ว่าเป็นสถานการณ์ที่ยอมรับได้

สิ่งที่ฉันทำตามคำตอบ @Mark McDonald เพียงแค่ใส่รหัสนี้หลังจากส่วนหัวของฉัน:

if( $_SERVER['REQUEST_METHOD'] === 'OPTIONS' )
{
    header("HTTP/1.1 202 Accepted");
    exit;
}

ตอนนี้เมื่อขอOPTIONSมันก็จะส่งส่วนหัวและผล 202

กรุณาให้คำแนะนำ:

JSONP รองรับวิธีการขอ GET เท่านั้น

* ส่งคำขอโดยfirefox : *

$.ajax({
   type: 'POST',//<<===
   contentType: 'application/json',
   url: url,
   dataType: "json"//<<=============
    ...
});

คำขอข้างต้นส่งโดยตัวเลือก (ในขณะที่ ==> ประเภท: 'POST' ) !!!!

$.ajax({
    type: 'POST',//<<===
    contentType: 'application/json',
    url: url,
    dataType: "jsonp"//<<==============
    ...
});

แต่คำขอข้างต้นส่งโดยGET (ในขณะที่ ==> ประเภท: 'POST' ) !!!!

เมื่อคุณอยู่ใน "การสื่อสารข้ามโดเมน" ให้ระวังและระมัดระวัง