X-Requested-With is not allowed by Access-Control-Allow-Headers

Question

I am developing one system. In that system there is one add item to cart functionality. In that functionality, I am using Jquery $.ajax used. But online server I have facing this error -

"XMLHttpRequest cannot load domain name/add_to_cart.php?item_id=3&hotel_id=2. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers."

Can any help me how to solve this error.

I am using this jquery code

$(document).on('click', '.ordering_btn', function(){
    var item_id = $(this).data('value');
    var hotel_id = "<?php echo $hotel_id; ?>";

    $.ajax({
      type: 'GET',

      url: 'add_to_cart.php?item_id='+item_id+'&hotel_id='+hotel_id+'',

      contentType: 'text/plain',

      xhrFields: {
        withCredentials: false
      },

      headers: {
        "Access-Control-Allow-Headers": "X-Requested-With",
        "X-Requested-With": "XMLHttpRequest"        
      },

      success: function(data) {
        $('#cart_msg').css('display', 'none');
        $('#cart_item').html(data);
        console.log(data);
      },

      error: function() {
      }
    });
});

By default jQuery won't send `X-Requested-With` headers for cross-origin requests. What code are you using? — Quentin, Mar 30 '15 at 10:54
I am using this jquery code - $(document).on('click', '.ordering_btn', function(){ var item_id = $(this).data('value'); var hotel_id = ""; $.ajax({ type: 'GET', url: 'add_to_cart.php?item_id='+item_id+'&hotel_id='+hotel_id+'', contentType: 'text/plain', xhrFields: { withCredentials: false }, headers: { }, success: function(data) { $('#cart_msg').css('display', 'none'); $('#cart_item').html(data); }, error: function() { } }); }); — Mark Preston, Mar 30 '15 at 10:55
@MarkPreston — Edit the question to put the code in it. Use the code formatting button in the GUI to ensure it is readable. — Quentin, Mar 30 '15 at 10:56
@Mark Preston Link to possible related issue : http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin — TomerM, Mar 30 '15 at 10:56
Why do you have `contentType: 'text/plain',`? You are making a GET request. There is no content to describe the type of. — Quentin, Mar 30 '15 at 11:04

score 20 · Answer 1 · edited May 18 '16 at 05:50

20

The error can be fixed by adding

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

in the server where ajax call leads to....

edited May 18 '16 at 05:50

Balwinder Singh

2,272
5
23
34

answered May 18 '16 at 05:31

AKhil N

340
3
4

This is most confusing, because my response headers include `access-control-allow-headers: *` (and `access-control-allow-methods: *`) but the browser still says "header ‘x-requested-with’ is not allowed according to header ‘Access-Control-Allow-Headers’". Does a more specific header really work where wildcards fail? – Qwertie May 05 '22 at 20:25

score 5 · Answer 2 · answered Mar 30 '15 at 11:03

5

Remove this:

  headers: {
    "Access-Control-Allow-Headers": "X-Requested-With",
    "X-Requested-With": "XMLHttpRequest"        
  },

Access-Control-Allow-Headers is a response header, not a request header.

The server you are making the request to does not allow X-Requested-With.

answered Mar 30 '15 at 11:03

Quentin

914,110
126
1,211
1,335

I follow your instruction but I have received this error - "XMLHttpRequest cannot load domainname/add_to_cart.php?item_id=2&hotel_id=1. The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'Domain Name' is therefore not allowed access." – Mark Preston Mar 30 '15 at 12:53
2

@MarkPreston — Great. That means the problem you asked about is solved and you have a new problem. (Which is that the server you are making the request to is configured to send back an invalid CORS response). – Quentin Mar 30 '15 at 13:04

X-Requested-With is not allowed by Access-Control-Allow-Headers

2 Answers2

Linked

Related