Understanding Access Control Request Headers

When making HTTP requests through AJAX using jQuery, it's crucial to handle access control issues for cross-origin requests. One aspect of this is adding custom headers to the request. Interestingly, upon examining the request using FireBug, it may appear that custom headers are being placed into the Access-Control-Request-Headers header instead of the expected values in their respective headers.

Addressing the Issue

This behavior stems from the browser's security measures and the way AJAX requests handle cross-origin interactions. To resolve this, follow the steps outlined in the provided answer:

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("My-First-Header", "first value");
    request.setRequestHeader("My-Second-Header", "second value");
  },
  url: url,
  data: data,
  success: function(msg) {
    alert(msg);
  }
});

The beforeSend option allows you to set the request headers before the request is sent. By using this option, the custom headers are added directly to the request and not included in the Access-Control-Request-Headers header.

Conclusion

By implementing the beforeSend option, you can effectively add custom headers to AJAX requests without facing access control issues. This enables you to send additional information with your requests and interact with cross-origin resources securely and efficiently.