Tiêu đề yêu cầu kiểm soát truy cập, được thêm vào tiêu đề trong yêu cầu AJAX với jQuery

Tôi muốn thêm một tiêu đề tùy chỉnh vào một yêu cầu AJAX POST từ jQuery.

Tôi đã thử điều này:

$.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);
});

Khi tôi gửi yêu cầu này và tôi xem bằng FireBug, tôi thấy tiêu đề này:

TÙY CHỌN xxxx / yyyy HTTP / 1.1
Máy chủ: 127.0.0.1:6666 Tác nhân người
dùng: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Chấp nhận: văn bản / html, ứng dụng / xhtml + xml, application / xml; q = 0.9, / ; q = 0.8
Ngôn ngữ chấp nhận: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
Chấp nhận mã hóa: gzip, khử
kết nối: giữ -alive
Xuất xứ: null
Truy cập-Kiểm soát-Yêu cầu-Phương thức: POST
Truy cập-Kiểm soát-Yêu cầu-Tiêu đề: tiêu đề đầu tiên của tôi, tiêu đề thứ hai của tôi Thực dụng
: không có bộ đệm Bộ
điều khiển bộ đệm: không có bộ đệm

Tại sao các tiêu đề tùy chỉnh của tôi đi đến Access-Control-Request-Headers:

Tiêu đề kiểm soát truy cập-yêu cầu-tiêu đề: tiêu đề đầu tiên của tôi, tiêu đề thứ hai của tôi

Tôi đã mong đợi một giá trị tiêu đề như thế này:

My-First-Header: giá trị đầu tiên
My-Second-Header: giá trị thứ hai

Có thể không?

Những gì bạn thấy trong Firefox không phải là yêu cầu thực tế; lưu ý rằng phương thức HTTP là TÙY CHỌN, không phải POST. Đó thực sự là yêu cầu 'trước chuyến bay' mà trình duyệt đưa ra để xác định xem có nên cho phép yêu cầu AJAX tên miền chéo hay không:

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

Tiêu đề Access-Control-Request-Headers trong yêu cầu trước chuyến bay bao gồm danh sách các tiêu đề trong yêu cầu thực tế. Sau đó, máy chủ dự kiến ​​sẽ báo cáo lại xem các tiêu đề này có được hỗ trợ trong ngữ cảnh này hay không, trước khi trình duyệt gửi yêu cầu thực tế.

Dưới đây là một ví dụ về cách đặt tiêu đề yêu cầu trong lệnh gọi 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));
  }
});

Mã này dưới đây làm việc cho tôi. Tôi luôn luôn chỉ sử dụng dấu ngoặc đơn, và nó hoạt động tốt. Tôi đề nghị bạn chỉ nên sử dụng dấu ngoặc đơn hoặc chỉ trích dẫn kép, nhưng không trộn lẫn.

$.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);
    }
  });

Vì bạn gửi các tiêu đề tùy chỉnh nên yêu cầu CORS của bạn không phải là một yêu cầu đơn giản , do đó trước tiên trình duyệt sẽ gửi yêu cầu TÙY CHỌN để kiểm tra xem máy chủ có cho phép yêu cầu của bạn không.

Nếu bạn bật CORS trên máy chủ thì mã của bạn sẽ hoạt động. Bạn cũng có thể sử dụng tìm nạp JavaScript thay thế ( tại đây )

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>

Dưới đây là cấu hình ví dụ bật CORS trên nginx (tệp 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;
    }
}

Đây là một cấu hình ví dụ bật CORS trên Apache (tệp .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"

Và đó là lý do tại sao bạn không thể tạo bot bằng JavaScript, vì các tùy chọn của bạn bị giới hạn ở những gì trình duyệt cho phép bạn làm. Bạn không thể yêu cầu một trình duyệt tuân theo chính sách CORS , mà hầu hết các trình duyệt tuân theo, để gửi các yêu cầu ngẫu nhiên đến các nguồn gốc khác và cho phép bạn nhận được phản hồi một cách đơn giản!

Ngoài ra, nếu bạn cố chỉnh sửa một số tiêu đề yêu cầu theo cách thủ công, như origin-headertừ các công cụ dành cho nhà phát triển đi kèm với trình duyệt, trình duyệt sẽ từ chối chỉnh sửa của bạn và có thể gửi OPTIONSyêu cầu chiếu trước .

Cố gắng sử dụng đá quý rack-cors . Và thêm trường tiêu đề trong cuộc gọi Ajax của bạn.