Asp.NET Web API and SignalR Cors
I am developing a DevExtreme project and I am using Web API and SignalR. I have two projects: Asp.NET Web API and DevExtreme. I have an error in the call.js file about cors. My codes are as follows:
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();
+3
source to share
2 answers
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 you are using Apache, the configuration file is named httpd.conf.
Access-Control-Allow-Origin: ORIGIN
can also be
Access-Control-Allow-Origin: *
or
Access-Control-Allow-Origin: ORIGIN | ORIGIN2 | ...
+2
source to share
The solution that worked for me was from this answer: {withCredentials: false}
$.connection.hub.start({ withCredentials: false }).done(function () { //... }
0
source to share