SignalR with web api, CORES error?

Question

I have a web api and javascript client in different projects. API url is http://localhost:55322/api/ Client app url is http://localhost:52229/

if both url's are same signalR is working. But if from different url's it give core error "XMLHttpRequest cannot load http://localhost:55322/api/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22chathub%22%7D%5D&_=1493097777904. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52229' is therefore not allowed access.".

My code is as following:

public partial class Startup
{
    public void Configuration(IAppBuilder app)
    {

        app.Map("/signalr", map =>
        {
            map.UseCors(CorsOptions.AllowAll);
            var hubConfiguration = new HubConfiguration { };
            map.RunSignalR(hubConfiguration);
        });            

    }
}

In the client project i'm calling like this:

@{
    ViewBag.Title = "CORES";
}



<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>

@section scripts {
        <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="http://localhost:55322/api/signalr/hubs"></script>
    <script>
        $(function () {

            $(function () {

                var hub = $.connection.chatHub;
                $.connection.hub.url = 'http://localhost:55322/api/signalr';


                $.connection.hub.start();
            });

            var chat = $.connection.chatHub;

            chat.client.hello = function () {
                console.log("Hello from ASP.NET Web API");
                alert('value :' );
            }

            chat.client.addNewMessageToPage = function (name, message) {
                $('#discussion').append('<li><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };

            chat.client.getValue2 = function (result) {
                alert('value :' + result)
            };



            $('#displayname').val(prompt('Enter your name:', ''));
            $('#message').focus();


            $.connection.hub.start().done(function () {
                console.log("sss");

                $('#sendmessage').click(function () {
                    console.log("Hdone  ");

                    chat.server.getValue("userId")
                    .done(function (result) {
                       alert('value :'+ result)
                    });
                    chat.server.send($('#displayname').val(), $('#message').val());
                    $('#message').val('').focus();
                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Hub

 public class ChatHub : Hub
{

    private static IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();

    public void Hello()
    {
        Clients.All.hello();
    }

    public string getValue( string avlue)
    {
        return "dd" + avlue;
    }

    public void GetValue2()
    {
        hubContext.Clients.All.getValue2("hellooo");
    }

    public static void SayHello()
    {
        hubContext.Clients.All.hello();
    }
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

How can i solve this CORES error?