10 September, 2013 Roel van Lisdonk 6 Comments 1 category

image

 

If you follow the tutorial http://www.asp.net/signalr/overview/getting-started/tutorial-signalr-self-host to the letter, you will end up with an error:

 

XMLHttpRequest cannot load http://localhost:8080/signalr/negotiate?connectionData=%5B%7B%22name%22%3A%22myhub%22%7D%5D&clientProtocol=1.3&_=1378817568655. Origin http://localhost:52947 is not allowed by Access-Control-Allow-Origin. Default.html:1

 

The solution can be found on

http://stackoverflow.com/questions/18471853/cross-domain-requests-not-working-in-signalr-2-0-0-rc1

 

The server should look like:

 

namespace SignalRSelfHost
{
    using System;
    using Microsoft.AspNet.SignalR;
    using Microsoft.Owin.Hosting;
    using Owin;

    class Program
    {
        static void Main(string[] args)
        {
            // This will *ONLY* bind to localhost, if you want to bind to all addresses
            // use http://*:8080 to bind to all addresses. 
            // See http://msdn.microsoft.com/en-us/library/system.net.httplistener.aspx 
            // for more information.
            string url = "http://localhost:8080";
            using (WebApp.Start<Startup>(url))
            {
                Console.WriteLine("Server running on {0}", url);
                Console.ReadLine();
            }
        }
    }
    class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            var config = new HubConfiguration();
            config.EnableJSONP = true;
            app.MapSignalR(config);
        }
    }
    public class MyHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addMessage(name, message);
        }
    }
}

and the client should look like:

 

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <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>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.0.0-rc1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="http://localhost:8080/signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
            //Set the hubs URL for the connection
            $.connection.hub.url = "http://localhost:8080/signalr";

            // Declare a proxy to reference the hub.
            var chat = $.connection.myHub;

            // Create a function that the hub can call to broadcast messages.
            chat.client.addMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start({ jsonp: true }).done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>
Tags:
Category: Uncategorized

6 Replies to “ASP.NET SignalR self hosting: Fixing the error XMLHttpRequest cannot load http://localhost:8080/signalr/negotiate…. Origin http://localhost:52947 is not allowed by Access-Control-Allow-Origin.”

  2. Awesome!

    If you lived next to me, I would pay you a beer!

    I was suffering trying to fix this error for more than 2 hours!!!

  3. Not quite; you should use CORS, not JSONP (unless you’re supporting older browsers). CORS is more secure than JSONP.

    I think the linked tutorial has been updated since this post was written, and details how to support CORS in your server.

  4. Everty works fine installed on windows server web edition 2008,
    calling from IE or Chrome locally on server works well.

    When i try from internet the message of chrome console is :
    “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://179.43.116.50’ is therefore not allowed access. The response had HTTP status code 500.”
    From IE only stop connection without message.
    PLEASE HELP!!!!

  6. It’s working. thanks a lot for saving my time. i already spent 2 days on it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts