Trying to call signalR from another domain, and keep on getting this error:
XMLHttpRequest cannot load
localhost:62150/signalr/negotiate?_=1362242757692. Origin
localhost:4982 is not allowed by Access-Control-Allow-Origin.
This is the code I'm trying to run:
$(function () {
jQuery.support.cors = true;
$.connection.hub.url = 'http://localhost:62150/signalr';
$.connection.hub.start()
.done(function () { alert("Now connected!"); })
.fail(function () { alert("Could not Connect!"); });
});
jquery and jquery.signalr.js are loaded, localhost:62150/signalr/hubs responds with JS, localhost:62150/signalr/hubs/negotiate?_=1362243021215 returns JSON if I run this in browser - so its not a missing script or invalid path issue.
What I've tried:
http://coding4life.wordpress.com/2012/03/30/making-cross-domain-calls-in-signalr/
(setting jQuery.support.cors and $.connection.hub.url)
Adding custom header in web.config with "Access-Control-Allow-Origin" value="*"
(this works only in IIS ? )
Creating an http module that would return this header on every request. Also tried to return actual domain name instead of *.
And combinations of all of the above.
Anyone has any idea what else I can try ?
The serving app is a combination of MVC and WebAPI (don't think it makes any difference).
If I'm trying that code from same domain - it works.
If you are using 1.0 or higher have you enabled cross domain on the server? (it's disabled by default now)
RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true });
After wasting a couple of hours I think it's good to share my experience:
DO NOT add Access-Control-Allow-Origin to your web.config (yes it never sais to add it, but when trying things this is literally the first I did and left it there after a simple jquery cross-domain access test)
RouteTable.Routes.MapHubs( new HubConfiguration() { EnableCrossDomain = true } ); works just fine for classes inheriting Hub
RouteTable.Routes.MapConnection<MyConnection>( "foo", "/foo", new ConnectionConfiguration { EnableCrossDomain = true } ); this works just fine too for classes inheriting PersistentConnection
Related
I am using Azure AD along with asp.net core mvc. The following code is the same with a default MVC project generated with Work or School Accounts authentication.
services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
.AddAzureAD(options => Configuration.Bind("AzureAd", options));
services.AddMvc(options =>
{
var policy = new AuthorizationPolicyBuilder()
.RequireAuthenticatedUser()
.Build();
options.Filters.Add(new AuthorizeFilter(policy));
})
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
Everything works just fine for the most time. The app is basically a notepad. A user logs in and adds notes/tasks. Everything after logging in is done using ajax requests. After some time the app stops working because there is a need for authentication again. Note that if I refresh the page everything is working again.
Am I doing this right? Am I missing something or this kind of use case is not supported.
Should I just create a javascript function that will auto refresh the page after some time?
Should I just create a javascript function that will auto refresh the page after some time?
You could try to create a hidden iframe in all the templates used by the Web App to make automatic calls to a MVC controller method that forces a call to renew the authentication data on a regular basis.
This is achieved very easily by configuring an automatic javascript process in the front-end executed in a loop on a regular basis of 45'. This value could be configured or extracted from a configuration file too. The only key condition is that it must be less than one hour.
Here is the simplified example code related to MVC Controller:
/* Action method, inside "Account" controller class, to force renewal of user authentication session */
public void ForceSignIn()
{
HttpContext.GetOwinContext().Authentication.Challenge(new AuthenticationProperties { RedirectUri = "/" },
OpenIdConnectAuthenticationDefaults.AuthenticationType);
}
And here is the simplified example HTML and javascript code employed to call silently in a hidden iframe to MVC Controller:
<iframe id="renewSession" hidden></iframe>
<script>
setInterval( function ()
{ #if (Request.IsAuthenticated) {
<text>
var renewUrl = "/Account/ForceSignIn";
var element = document.getElementById("renewSession");
element.src = renewUrl;
</text>
}
},
1000*60*45
);
</script>
For more details, you could refer to this article which get the similar situation with you.
I found a simple solution by accident. My goal was to hit a check endpoint every minute and If I get a 302 status code I would redirect the user to the authentication page.
public IActionResult Check()
{
return Ok(new { });
}
I left the developer tools open and noticed that every 30 mins I get a bigger response.
And this actually refreshes the cookie and as a result there is no need to redirect the user.
So to sum up someone needs to do this check every 40-50 minutes because the expiration is set to ~1 hour by default.
I am building an iOS mobile application using the Ionic framework. The app will be accessing APIs that will be served by an ASP.NET 5 (MVC 6) application hosted on IIS using Integrated Windows Authentication. The server already has a web interface to it that uses an AngularJS client. I have been trying to get a $http call to the server from within an Ionic/Angularjs controller and have had no luck getting through the IIS Integrated windows authentication (I have tried running on the device/simulator as well as ionic serve). I always get a 401 Unauthorized error. I have tried setting withCredentials to true and passing in a username/password in the request with no luck. When I try to access the API URL from safari on an iPhone (a non-windows environment), I do get the Browser Authentication popup which successfully logs me in on entering my intranet windows username password.
I initially had some CORS issues that I have sorted through by adding the CORS service on the server side and also allowing all origins. I also have the proxy setup to avoid CORS issue when testing using ionic serve. Has anyone done something like this before? This is my controller code:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $http) {
$http.defaults.useXDomain = true;
$http.defaults.withCredentials = true;
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$http.post('http://localhost:8100/api/APIAccount/Login',{withCredentials:true})
.then(function(response)
{
console.log('success');
}, function(error) {
console.log('error');
});
};
});
After several hours of troubleshooting, it was as simple as setting up ASP.NET 5 CORS service to allow credentials. In my Startup.cs file in the ConfigureServices function I had to put in the following. Hope this helps someone else in the future.
services.AddCors(options =>
{
options.AddPolicy("AllowAllOrigins",
builder => builder.WithOrigins("http://<domainname>")
.AllowCredentials());
});
Recently I was trying to profile ASP MVC methods called with AngularJS $http service and I noticed that MiniProfiler does not update the data as it does for AJAX calls from JQuery, for example.
Is there a way to use MiniProfiler with Angular ?
Adjustment needed for Angular (1.3.10)
(not needed if you are using another library for your XHR-needs)
MiniProfiler does this to XMLHttpRequest to be able to intercept all XHR-calls for angular
XMLHttpRequest.prototype.send = function sendReplacement(data) {
if (this.onreadystatechange) {
...
Well, Angular never sets xhr.onreadystatechange so we need to adjust this in a harmless way:
function createXhr() {
var xhr = new window.XMLHttpRequest();
xhr.onreadystatechange = function () { };
return xhr;
}
Explained in detail here
This issue was addressed with this pull request and has been fixed in the current MiniProfiler nuger.
I'm having an issue when deploying a very basic MVC5 app running SignalR 2.0.2. Everything works great in my local development environment when I'm running it with IIS Express. When I deploy to IIS, my js receives a 404 error attempting to connect to SignalR.
More specifically, I'm deploying to an application/virtual directory that is running under my Default Web Site. When I publish directly to Default Web Site, everything works successfully so IIS is not the issue.
GET http://myServer/signalr/negotiate?connectionData=%5B%5D&clientProtocol=1.3&_=1395517687175 404 (Not Found)
I'm assuming the 404 is caused by the missing application name. ie: myServer/MyApp/signalr/negotiate...
I've searched a number of posts and SignalR documentation with no luck regarding IIS and Applications/Virtual Directories and SignalR. Below is snippets of code in my app.
Thanks!
JS:
var connection = $.hubConnection();
var proxy = connection.createHubProxy('TestHub');
connection.start()
.done(function () {
console.log('Now connected, connection ID=' + connection.id + ' using transport=' + connection.transport.name);
})
.fail(function () { console.log('Could not connect'); });
Startup.cs:
app.MapSignalR();
Update
By changing the following JS code I was able to 'fix' the issue. The question is, how proper is this?
//var connection = $.hubConnection();
var connection = $.hubConnection("/MyApp/signalr", { useDefaultPath: false });
Your fix seems reasonable.
{ useDefaultPath: false } simply tells SignalR not to append "/signalr" to the url, so you could also create your connection object like this: var connection = $.hubConnection("/MyApp");
Alternatively, if you want to use JS hub proxies generated at /MyApp/signalr/hubs, you can could connect like this:
var proxy = $.connection.testHub;
// Make sure you always wire up client methods before calling start
proxy.client.myClientMethod = function () { /* ... */ };
$.connection.hub.start()
.done(function () { /* ... */ })
.fail(function () { /* ... */ });
http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client#genproxy
A solution which will work in dev, and in IIS hosted as application, virtual directory or root is to configure the hub using the page url as its base. This will mean you won't need to hard code the value and negates configuration change for development and deployed scenarios.
var connection = $.hubConnection(document.location.origin + document.location.pathname);
I'm working on an asp.mvc3 web api project. in this project I use TypeScript and Angular.js
and I need to access the business layer from TypeScript through the Web API. I called the Web API inside the constructor method in TypeScript using the
code given below.
constructor($scope, $http: any) {
$scope.VM = this;
$http.get("/API/PrivateAPI/Test/1").success((a) => { this.Tiles = a });
var bb = this.Tiles;
}
However, when trying to get the object list from the business layer, the Tiles array is empty. I debugged the code and found out the Web API is called after passing the last line of the constructor and does return results. I need to call that method inside the constructor and get object list to the Tiles array.
Does anyone know how to do so?
First of, I think you should do the following (notice .data) :
$http.get("/API/PrivateAPI/Test/1").success((response) => { this.Tiles = response.data });
Anyways, $http only supports async http requests. What you want can be done by a synchronous XHR request and that is considered bad UI experience, since the browser window freezes till the XHR request completes, and therefore $http doesn't support it (configuration docs).
What you can do is something like :
call another function from response e.g.
(response) => { this.Tiles = response.data; this.continueWithProcessing(); }
Or, Setup a variable to hide a preloader when the response comes back:
(response) => { this.Tiles = response.data; this.allDone=true; }
Where you have an ng-show on something like:
<div ng-show="!VM.allDone">Loading the data....</div>
Or both :)
Note: An async setting is supported in underlying browsers native XHR object and therefore in $.ajax which is the jquery ajax function : http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings. However it is a horrible UI experience + if you use it from angular you are responsible for scope.apply.