Asp.NET Web API and SignalR Cors

Question

I am developing a DevExtreme project and I am using Web API and SignalR. I have two projects as Asp.NET Web API and DevExtreme. I have an error on call.js file about cors. My codes is following:

http://localhost:40623/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22notificationshub%22%7D%5D&_=1431708909660. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:50847' is therefore not allowed access.

WebApiConfig file (Web API Project):

config.MapHttpAttributeRoutes();

config.EnableCors();

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

OWIN Startup File (Web API Project):

public void Configuration(IAppBuilder app)
{
    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
    ConfigureAuth(app);

    GlobalHost.DependencyResolver.Register(typeof(IUserIdProvider), () => new UserIdProvider());

    //If I uncomment this line, then error will be:
    //The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:50847, *', but only one is allowed. Origin 'http://localhost:50847' is therefore not allowed access.
    //app.UseCors(CorsOptions.AllowAll);
    app.MapSignalR();
}

Web.Config file (Web API Project):

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Authorization" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Calls.js file (DevExtreme Project):

$.connection.hub.url = "http://localhost:40623/signalr";
var notificationsHub = $.connection.notificationsHub;
notificationsHub.client.newCall = function (message) {
    viewModel.calls.load();
};
$.connection.hub.start();

Answer 1

You need to add this to your server config:

Access-Control-Allow-Origin: ORIGIN
Access-Control-Allow-Credentials: false
Access-Control-Allow-Methods: ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL
Access-Control-Allow-Headers: Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If
Access-Control-Expose-Headers: DAV, content-length, Allow

If your using Apache the config file is called httpd.conf.

Access-Control-Allow-Origin: ORIGIN 

can also be

Access-Control-Allow-Origin: *

or

Access-Control-Allow-Origin: ORIGIN | ORIGIN2 | ...

Answer 2

对我有用的解决方案来自这个答案： {withCredentials：false}

$.connection.hub.start({ withCredentials: false }).done(function () {  //... }