XMLHttpRequest is not set by using .setRequestHeader

Question

I try to make a cross domain request. To be able to do it I have to set an http header.

$.ajax({
                type: 'GET',
                url: 'api',
                beforeSend: function (request)
                {
                    request.setRequestHeader('authorization', 'Basic ...==');
                },
                success: function(data) {
                    debugger;
                }
            });

beforeSend method seems to be invoked but 'authorization' header is not set. Could you please help me to figure this out?

UPDATED: here are the received CORS headers:

Access-Control-Allow-Origin : localhost
Access-Control-Allow-Credential: true
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS

It looks like Access-Control-Allow-Headers is missing.

Answer 1

Make sure that your API supports CORS and that Authorization is an allowed request header to be set. When you send an OPTIONS request to the endpoint your API should respond with the following response headers:

Access-Control-Allow-Headers:X-Requested-With, Content-Type, Authorization
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*

This allows the client to set the X-Requested-With, Content-Type and Authorization request headers when calling the API method and it allows GET, POST, PUT, DELETE, OPTIONS verbs from any origin domain.

So in order to debug the problem start by sending an OPTIONS request to your API endpoint and observe the response HTTP headers.