I am facing a issue in routing.
the issue is when i hit the url - http://localhost:3000/extInsurance/16/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySUQiOiIzIiwiUm9sZUlEIjoiOCIsIlVzZXJOYW1lIjoiYWxpY2lhaGludG9uQHlvcG1haWwuY29tIiwiQ2xpbmljSUQiOiIxMjg5IiwiVXNlclR5cGUiOiJTVEFGRiIsIlN0YWZmSUQiOiIyIiwiUm9sZU5hbWUiOiJET0NUT1IiLCJCdXNpbmVzc1Rva2VuIjoiYmxvb2QwMDEiLCJPcmdJRCI6IjEzNTYiLCJCYXNlUm9sZUlEIjoiOCIsIkJhc2VVc2VyVHlwZSI6IlNUQUZ
this url get hits properly and i get the response. meaning i get redirect to correct page.
but when i push this on testing server then i am getting bad request with same url
also when i reduce the path then again it get hit properly on my testing server.
It's bad idea to use token as a part of URL path.
It's recommended to pass token as a optional URL parameter. Something like this,
http://localhost:3000/some-path?token=eyJhb...
Related
I am using MEAN Stack, and jade for html templating for developing a project. Since I am using jade all the .when() of the $routeProvider goes through the server and then rendered. Things are absolutely fine until recently I added $httpProvider.interceptor for authenticating each request. Basically, I started using JWT token based authentication and before requesting anything to the server, in my interceptor I am attaching 'Authorization' header. And the first middleware for protected apis I am verifying the token present in the 'Authorization' header. If present then proceed, else send authorization error.
Now, as mentioned in the title of the question. I have a few URLs containing hypen(-) between two words just to increase the readability.
eg: .when('/firstPart/secondPart1-secondPart2/thrirdPart', {
templateUrl: '/path/to/file'
})
this url is working fine if user going through the normal flow of getting to this url. The problem arises when the user comes to this page and hits the browser's refresh button, as he gets an error 'Authorization header not set'
I did a few research on what and why this is happening, I found the answer in
AngularJS not intercepting direct requests from Address Bar. According, to this answer and few other I understood that on refreshing browser makes a direct request to the server and doesn't go through angular routes, and thus, interceptor that is attaching the Authorization header to each request header is not getting called.
As, suggested by the same link, the workaround is that if auth verification fails make a call to '/', I donnot wish to do that as the user has just refreshed the page and he has to ideally get back the same page as he was in before he pressed refreshed. I am stuck here on how to do this.
Also, there is another mind–boggling this is if, I remove the 'hyphen'(-), and make it one word i.e., .when('/firstPart/secondPart1SecondPart2/thrirdPart', {
templateUrl: '/path/to/file'
})
everything works as expected even when the user hits the refresh button. It is first going through the angular router and interceptor attaches the Authorization header and then goes to make a get request for that template.
Wondering, is there any problem in using hyphen in URLs? However, I do not wish to remove the hyphens as I have already used it in many places and also I feel its good to have - between two words that needs to be displayed together in the URL than making them camel cased.
S, finally I have two questions :
1. How to load the same page as the user was in before he hit refresh, instead of redirecting him to '/' or login url.
2. The problem explained above, occurs only for hyphenated(-) URLs, what is the problem having '-' in the URL.
I'm running into a bit of a snag with some custom routing I did. We have these custom routes that handle product perma-links, and I have Angular in the background doing requests to the server for routes that aren't perma-links. This works fine and it will load other pages in every other browser except IE.
What happens in IE is it takes the relative url from the http request and it just appends it, for example:
This is the permalink url, which loads fine:
http://localhost:16124/products/7-1-2-contemporary-glass-full-border-award/
This is the request in Angular when I click the link to customize this product:
var navigateUrl = "Product/Customize/" + this.productId;
if (product.isCustomizable != true) {
navigateUrl = "Cart";
}
this.$window.location.href = navigateUrl;
And the url it tries to call is this:
http://localhost:16124/products/7-1-2-contemporary-glass-full-border-award/Product/Customize/8036
I had a similar problem on other browsers where if I was using Html.ActionLink it would construct the url's for anything inside of the permalink pages it would append the url as a query string, and to fix that I just switched them to plain html links where I wrote out the full relative url myself, but I don't think that is the problem here; does anyone know what could be happening? Again I am only having this issue in IE.
Okay so I figured out what the issue was, if you use location.href, in this case IE isn't smart enough to redo the url after the hostname, so it ends up just appending what you had to the end of the url, so changing it to location.pathname will fix the bug because it tells IE to explicitly redo the url after the hostname.
I'm trying to setup and 404 page on my website by using
$urlRouterProvider.otherwise("/404");
but this only works for URLs that do not have multiple slashes/parameters. The following is all of my URLs and states in the same order as in my code:
Home – /
404 – /404
About – /about-us
Privacy – /privacy-policy
Terms – /terms-conditions
Subscribe – /subscribe
Author – /author/:author
Topic – /:category/page/:pageNumber
Post – /:category/:title
If there is a url with two slashes (Ex: /qwkhdjqkwnd/q1weuih), my app thinks it's a Post and tries to fetch information but this obviously fails – it does not know that this is not a valid URL, and thus does not redirect to my 404 page.
What's the best practice for this? Should I allow the app to try and fetch data using the invalid URL and, redirect the state when it fails?
Checking for an undefined object and redirecting to /404 worked for my purposes.
I have build an AngularJS application and want to use paymill.com to offer different payment methods. I am currently struggling with PayPal.
This api-call allows me to specify a redirect url where the customer gets redirected to after the payment:
https://developers.paymill.com/API/index#create-new-payment-checksum
I get a response with this URL as 'return_url':
http%3A%2F%2Ftest.test.com%2F%23%2Fteatimes%2Fbuy%2Fp82uHoLI6z%2F1
which seems to be the correct encoding for:
http://test.test.com/#/teatimes/buy/p82uHoLI6z/1
Sadly the redirect after the payment does not work and simply redirects me to:http://test.test.com/?paypal_parameters/#/.
So it seems like that everything after the hashtag gets ommited...Is there a way to fix this on my end? I would rather not use html5 mode.
EDIT: If i use the above url without the '#' i get correctly redirect, but angularjs is unable to resolve this of course.
Why don´t you wanna use the html5 mode? you wouldn´t have any issue with the hashtag.
What angular method do you use for redirecting to the URL.
How to use $stateprovider without # in URL?
If we use $locationprovider.html5mode(true) then first time it was loading correctly but after refreshing the page the state is not loading and error is displaying.
I will explain you the scenario. We are using ASP.NET web api as back end server and front end is purely HTML application with angular.JS . we are not facing any issues with backend server. we don't have issues with api calls. I will explain with a example: www.test.com/#/main/home is redirecting to www.test.com/main/home using $state.go and rendering the view perfectly. But after redirecting to www.test.com/main/home if we refresh the page we are getting 404 error. Please help out
I am looking for to provide URL as per use choice. So I need to eliminate the # for that.
The problem with html5mode(true) and page reload is that in HTML 5 mode the browser sends the full URL to the server when a page reload is triggered. And if the resource of the full URL does not exist on the server, an error is returned.
So to fix your problem, you need to add a rule on the server to always send the same .html file no matter what URL is called.
The $stateprovider will then initialize the client side state accordingly.
You need to re-write the url with .htaccess
Check this link out:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode