ส่วนหัวคำขอควบคุมการเข้าถึงถูกเพิ่มไปยังส่วนหัวในคำขอ AJAX ด้วย jQuery

ฉันต้องการเพิ่มส่วนหัวที่กำหนดเองลงในคำขอ AJAX POST จาก jQuery

ฉันได้ลองสิ่งนี้แล้ว:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
    //OR
    //beforeSend: function(xhr) { 
    //  xhr.setRequestHeader("My-First-Header", "first value"); 
    //  xhr.setRequestHeader("My-Second-Header", "second value"); 
    //}
}).done(function(data) { 
    alert(data);
});

เมื่อฉันส่งคำขอนี้และฉันดูด้วย FireBug ฉันเห็นส่วนหัวนี้:

ตัวเลือก xxxx / yyyy HTTP / 1.1
โฮสต์: 127.0.0.1:6666
User-Agent: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
ยอมรับ: ข้อความ / html แอปพลิเคชัน / xhtml + xml, แอปพลิเคชัน / xml; q = 0.9, / ; q = 0.8
ยอมรับภาษา: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
ยอมรับการเข้ารหัส: gzip, ยุบการ
เชื่อมต่อ: เก็บ เริ่ม
ต้นที่มีชีวิต:
การควบคุมการร้องขอการเข้าถึงnull วิธี:
การเข้าถึงการควบคุม POST คำขอส่วนหัว: My-first-header, My-second-header
Pragma: ไม่มีแคช
การควบคุมแคช: ไม่มีแคช

ทำไมส่วนหัวที่กำหนดเองของฉันไปที่Access-Control-Request-Headers:

Access-Control-Request-Headers: my-first-header, my-second-header

ฉันคาดหวังค่าหัวเช่นนี้

My-First-Header: ค่าแรก
My-Second-Header: ค่าที่สอง

เป็นไปได้ไหม?

สิ่งที่คุณเห็นใน Firefox ไม่ใช่คำขอจริง โปรดทราบว่าวิธี HTTP เป็นตัวเลือกไม่ใช่ POST จริงๆแล้วมันเป็นคำขอ 'ก่อนบิน' ที่เบราว์เซอร์ทำการตัดสินใจว่าควรอนุญาตคำขอ AJAX ข้ามโดเมนหรือไม่:

http://www.w3.org/TR/cors/

ส่วนหัว Access-Control-Request-Headers ในคำขอก่อนบินรวมถึงรายการส่วนหัวในคำขอจริง เซิร์ฟเวอร์คาดว่าจะรายงานกลับมาว่าส่วนหัวเหล่านี้ได้รับการสนับสนุนในบริบทนี้หรือไม่ก่อนที่เบราว์เซอร์จะส่งคำขอจริง

นี่คือตัวอย่างวิธีตั้งค่าส่วนหัวคำขอในการโทร jQuery Ajax:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});

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

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });

เนื่องจากคุณส่งส่วนหัวที่กำหนดเองเพื่อให้คำขอ CORS ของคุณไม่ใช่คำของ่ายดังนั้นเบราว์เซอร์จะส่งคำขอ OPTIONS แบบ preflight เป็นครั้งแรกเพื่อตรวจสอบว่าเซิร์ฟเวอร์อนุญาตคำขอของคุณหรือไม่

หากคุณเปิด CORS บนเซิร์ฟเวอร์รหัสของคุณจะใช้งานได้ คุณยังสามารถใช้การดึง JavaScript แทน ( ที่นี่ )

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

นี่คือตัวอย่างการกำหนดค่าที่เปิดCORS บน nginx (ไฟล์ nginx.conf):

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

นี่คือตัวอย่างการกำหนดค่าที่เปิดCORS บน Apache (ไฟล์. htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

และนั่นคือเหตุผลที่คุณไม่สามารถสร้างบอทด้วย JavaScript ได้เนื่องจากตัวเลือกของคุณถูก จำกัด เฉพาะสิ่งที่เบราว์เซอร์อนุญาตให้คุณทำ คุณไม่สามารถสั่งซื้อเบราว์เซอร์ที่เป็นไปตาม นโยบายCORSซึ่งเบราว์เซอร์ส่วนใหญ่ติดตามเพื่อส่งคำร้องขอแบบสุ่มไปยังจุดกำเนิดอื่น ๆ และให้คุณได้รับการตอบกลับที่ง่ายดาย!

นอกจากนี้หากคุณพยายามแก้ไขส่วนหัวคำขอด้วยตนเองเช่นorigin-headerจากเครื่องมือของนักพัฒนาซอฟต์แวร์ที่มาพร้อมกับเบราว์เซอร์เบราว์เซอร์จะปฏิเสธการแก้ไขของคุณและอาจส่งOPTIONSคำขอpreflight

ลองใช้อัญมณีของชั้นวาง และเพิ่มฟิลด์ส่วนหัวในการโทร Ajax ของคุณ