With the new implementation of HistoryLocation in 1.5.1, the rootURL parameter now requires a trailing slash. This is now causing issues for users that are trying to access the application without a trailing slash as ember thinks that it cannot find a route.
For example my application is located at /path/to/app, this is what existing users have bookmarked and is linked by default from our serverside framework (which creates in app urls with trimmed trailing slashes).
Is there a way to either,
1.Allow no trailing slash in the HistoryLocation rootURL
2. Transition the users using the router when trying to access the app without a trailing slash?
From my server I have a window.rootURL with the application root URL without a trailing slash(there are dynamic segments based on the accessed resource).
In my router I have the following:
App.Router.reopen({
location: 'auto',
rootURL: window.rootURL + '/'
});
I could run something like
if (location.pathName == window.rootURL) {
window.location.assign(window.rootURL + '/');
}
But this would force a reload of the page which seems like it shouldn't be needed since I already have a full Ember App running.
Since this application shares components with a few Ember applications we have in our code base and there are dynamic segments in the rootURL, creating routes just to redirect wouldn't make much sense (at least IMO).
So, what would be the best solution for this problem?
Without a ton of thought, you could use replaceState which wouldn't reload the page, but would update the url to hit your ember app.
window.history.replaceState({},"", pathWithSlash);
Related
I am writing a single page app with React for educational purposes. My React-Router v4 BrowserRouter handles client side routing correctly on CodeSandbox but not locally. In this case, the local server is the webstorm built-in devserver. HashRouter works locally but BrowserRouter does not.
Functioning properly: https://codesandbox.io/s/j71nwp9469
You are likely serving your app on the built-in webserver (localhost:63342), right? Internal web server returns 404 when using 'absolute' URLs (the ones starting with slash) as it serves files from localhost:port/project_name and not from localhost:port. That's why you have to make sure to change all URLs from absolute to the relative ones.
There is no way to set up the internal webserver to use project root as server document root. But you can configure it to use URLs like http://<host name>:<port> where the 'host name' is a name specified in hosts file, like 127.0.0.1 myhostName. See https://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559.
The solution was to understand how push state routing and the history API works. It is necessary to proxy requests through the index page when serving Single Page Applications that utilize the HTML5 History API.
The Webstorm dev server is not expected to include this feature, therefore the mention of Webstorm in this thread was a mistake.
There are multiple libraries of < 20 lines which do this for us, or it can easily be hand coded.
I have an ember app that I have been building. It has several routes including index (/) and authorization (/authorization). My trouble is that when the application is hosted on hostgator, loading the url myapp.com/authorization results in a 404. This makes sense since there is nothing at that actual url. I need hostgator to redirect all non-file-specific urls to my index.html file.
An example in psuedo code:
if url has extension (.jpg, .pdf, etc)
serve requested url
else
serve index.html but retain url in the address bar
I've done this sort of thing with local instances of node when using AngularJs with ui-router, but this is my first time using History-API based routing served from HostGator.
Any suggestions on where to start to set this up?
Not much of an answer but you can use locationType: 'hash' in environment.js as your configuration.
With locationType set to 'auto', refreshing on application hosted on Hostgator will produce a 404. I have encountered this before and not found any solution. So I switched to 'hash'.
If you find any solution, please tell me. Thanks!
An ember cli site was deployed onto a server and it works fine. Links via {{link-to}} all work beautifully.
BUT, when a user (me that is) manually enters a url and hits return. then the site is not found.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
even changing a parameter of a working url (initially navigated to thru link-to)
http://site/start/0/length/30
and simply backspacing, changing the 30 to 20 and hit return
http://site/start/0/length/20
its a no go
localhost:4200 doesn't have this issue.
has anyone observed this vicious behaviour.
i actually need it for a callback redirect for oauth. but then noticed than any manually entered urls dont function.
It is because your server (IIS?) is trying to access the full path requested by your browser (eg /start/0/length/30), and not finding a valid file on disk returns a 404.
So, you need to configure your web server to proxy/rewrite the requests to the proper location. Assuming you are deploying your application in your "root" directory, the proper location is /index.html (the file ember-cli creates).
Unfortunately, I can't help you with IIS, but I can provide you with the proper configuration for nginx:
location / {
try_files $uri $uri/ /index.html;
}
This says "If the requested URI doesn't exist, instead respond with the /index.html file".
When you are using ember server on localhost:4200 you don't have the same problem because it is automatically doing something similar transparently.
If you are serving this up from any web server that isn't the built in Ember, ie non local server, you need to have a wildcard rule that returns your Ember app's index.html file for anything below your websites base url. If you only have your base url return the index.html file, then your webserver is confused by the unrecognized url and thinks it has nothing to return. If your rule, though,
for baseUrl/* returns index.html, your Ember app will then run the correct route hooks to establish the app context
this is a dupe and the question is
How to run emberJS application in IIS?
the easy answer is set locationType: hash in ember-cli's environment.config file (copied from accepted answer)
that will introduce a '#' in the url but doesnt require an IIS change.
var ENV = {
...
locationType: 'hash'
... };
I am reading about Restangular and everywhere is mentioned that Restangular promises and Angular works smart and the template is updating in situations like this:
As Angular supports setting promises to scope variables as soon as we
get the information from the server, it will be shown in our template
$scope.something = Restagular.one('something').get();
I am trying to do the same thing but the Restangular is in a service because I want to keep my controllers clean. When I make a request to my REST API the Angular template is not updating and I receive this error:
XMLHttpRequest cannot load http://localhost:3000/api/template/1. The request was redirected to 'http://localhost:3000/api/template/1/', which is disallowed for cross-origin requests that require preflight.
Here is my code:
in the service...
myAppServices.service('TemplateService', ['$http', '$cookies', '$cookieStore', Restangular',
function($http, $cookies, $cookieStore, Restangular) {
Restangular.setBaseUrl(constants.serverAddress);
var getTemplate = function(templateId) {
// Check the input
if (!isValidId(templateId))
return;
return Restangular.one('api/template', templateId).get();
};
// Public getters
this.getTemplate = getTemplate;
}]);
in the controller..
$scope.currentCard = TemplateService.getTemplate(1);
So where is the problem in this case - on the client or on the server. For my API I am using django-rest-framework but I don't have problems when I am getting list with all templates (without a specific id).
I know that I can try to return a promise from the service and from its .then() to set my scope variable but in the official repo of Restangular is mentioned this and I want to use it because the code remains clean.
The issue that you are having is because Django will automatically redirect urls without a slash to urls with a slash. This isn't framework specific, as I recently discovered it is an issue for ExtJS as well.
Because you are requesting the url api/templates/1 without the trailing slash and the API is being served at api/templates/1/, Django is automatically redirecting requests from one location to the other. Normally this issue an issue, you just see the redirect happening in the console and nobody cares, but CORS requires you to have permission for the url you requested, which means it can't redirect.
You can fix this two different ways: on the client side or on the server side.
If you want to fix this on the client side, and keep the server requiring slashes, you need to tell restangular to add a slash to the end. Restangular allows you to do this by setting
RestangularProvider.setRequestSuffix('/');
In your code, which will tell restangular to always add the trailing slash.
If you want to fix this on the server side, you are going to need to stop requiring slashes in your API. This has the unpleasant side effect of not allowing any requests with a slash, and may break existing applications which are working as expected. Django REST Framework allows you to do this on the router level by setting trailing_slash=False when initializing the router.
router = SimpleRouter(trailing_slash=False)
This will tell Django REST Framework to register all of the urls without a trailing slash.
In deploying a version of the Django website I'm working on to Microsoft's Azure service, I added a page which takes a query string like
http://<my_site_name>.azurewebsites.net/security/user/?username=<some_username>&password=<some_password>
However, I was getting 404 responses to this URL. So I turned on Django's Debug flag and the page I get returned said:
Page not found (404)
Request Method: GET
Request URL: http://<my_site_name>.azurewebsites.net/security/user/?username=<some_username>&password=<some_password>?username=<some_username>&password=<some_password>
Using the `URLconf` defined in `<my_project_name>.urls`, Django tried these URL patterns, in this order:
^$
^security/ ^user/$
^account/
^admin/
^api/
The current URL, `security/user/?username=<some_username>&password=<some_password>`, didn't match any of these.
So it seems to be appending the query string onto the end of the url that already has the same query string. I have the site running on my local machine and on an iis server on my internal network which I'm using for staging before pushing to Azure. Neither of these site deployments do this, so this seems to be something specific to Azure.
Is there something I need to set in the Azure website management interface to prevent it from modifying URLs with query strings? Is there something I'm doing wrong with regards to using query strings with Azure?
In speaking to the providers of wfastcgi.py they told me it may be an issue with wfastcgi.py that is causing this problem. While they look into it they gave me a work around that fixes the issue.
Download the latest copy of wfastcgi.py from http://pytools.codeplex.com/releases
In that file find this part of the code:
if 'HTTP_X_ORIGINAL_URL' in record.params:
# We've been re-written for shared FastCGI hosting, send the original URL as the PATH_INFO.
record.params['PATH_INFO'] = record.params['HTTP_X_ORIGINAL_URL']
And add right below it (still part of the if block):
# PATH_INFO is not supposed to include the query parameters, so remove them
record.params['PATH_INFO'] = record.params['PATH_INFO'].split('?')[0]
Then, upload/deploy this modified file to the Azure site (either use the ftp to put it somewhere or add it to your site deployment. I'm deploying it so that if I need to modify it further its versioned and backed up.
In the Azure management page for the site, go to the site's configure page and change the handler mapping to point to the modified wfastcgi.py file and save the configuration.
i.e. my handler used to be the default D:\python27\scripts\wfastcgi.py. Since I deployed my modified file, the handler path is now: D:\home\site\wwwroot\wfastcgi.py
I also restarted the site, but you may not have to.
This modified script should now strip the query string from PATH_INFO, and urls with query strings should work. I'll be using this until I hear from the wfastcgi.py devs that the default wfastcgi.py file in the Python27 install has been fixed/replaced.