angularjs - incorrect - Ui-router angular con un parámetro de consulta url que contiene un "punto"

django csrf token missing or incorrect

Question

En nuestra aplicación angular, tenemos que ocuparnos de los identificadores que contienen un "punto". Por ejemplo:

book = {
id: ''123.456''
}

Tenemos problemas para usar dichos identificadores como parámetros de url. Todo funciona bien si la navegación se realiza a través de "Angular", es decir, al hacer clic en el enlace que invoca $state.go(''bookDetails'', {bookId: book.id}); . Pero las cosas no funcionan al volver a cargar la página

"No se puede OBTENER /bookDetails?bookId=123.456"

en el controlador:

$scope.viewBookDetails = function() {
$state.go(''bookDetails'', {bookId: book.id});
}

en la vista

<a href="" ng-click="viewBookDetails(); $event.stopPropagation();">

en el enrutador

.state(''bookDetails'', {
url: ''/bookDetails?bookId''
}

en el navegador:

https://example.com/bookDetails?bookId=123.456

El enlace funciona si el "punto" se reemplaza con %2E en el navegador.

Intentamos reemplazar "punto" con "% 2E" en el parámetro para $ state.go ()

$scope.viewBookDetails = function() {
$state.go(''bookDetails'', {bookId: book.id.split(''.'').join(''%2E'')});
}

pero no funciona porque el "%" se codifica automáticamente y el "punto" en el navegador se reemplaza por "% 252E"

https://example.com/bookDetails?bookId=123%252E456

Answer 1

El problema de actualización que estaba obteniendo con un parámetro de consulta url que contiene un ''punto'' es un problema del servidor.
Es causado por la forma en que trato con html5mode (redirigir a index.html si no es un recurso estático) en la configuración del servidor de grunt

// The original grunt server settings
connect: {
options: {
port: 9000,
// Change this to ''0.0.0.0'' to access the server from outside.
hostname: ''localhost'',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
require(''connect-modrewrite'')([''^[^//.]*$ /index.html [L]'']), //Matches everything that does not contain a ''.'' (period) and causes the problem
connect.static(''.tmp''),
connect().use(
''/bower_components'',
connect.static(''./bower_components'')
),
connect().use(
''/app/styles'',
connect.static(''./app/styles'')
),
connect.static(appConfig.app)
];
}
}
},

Cambié

require(''connect-modrewrite'')([''^[^//.]*$ /index.html [L]'']),

a

require(''connect-modrewrite'')([
''!//.html|//.js|//.css|//.svg|//.jp(e?)g|//.png|//.gif|//.ttf$ /index.html''
]),

Answer 2

Revisé completamente el código. Puedo usar puntos finos así que bifurque el plunker para mostrar dónde está obteniendo un error.

http://plnkr.co/edit/Ct09Q9uoc282JuWdsO1s?p=preview

console.log("Scripts loading... ");
// Here''s a skeleton app. Fork this plunk, or create your own from scratch.
var app = angular.module(''demonstrateissue'', [''ui.router'']);
app.controller(''myController'', function($scope, $state){
$scope.book = {
id: ''123.456''
};
$scope.viewBookDetails = function() {
console.log(''new id'');
$state.go(''bookDetails'', {bookId: 456.3456});
}
});
// Empty config block. Define your example states here.
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
$stateProvider.state(''bookDetails'', {
url: ''/bookDetails:bookId'',
controller: function($scope, $stateParams) {
$scope.book = {
id: $stateParams.bookId
};
},
template: "<h3>book: {{book}}</h3>"
});
$urlRouterProvider.otherwise("/bookDetails/91.23");
});
// Adds state change hooks; logs to console.
app.run(function($rootScope, $state, $location) {
$rootScope.$state = $state;
$rootScope.$location = $location;
function message(to, toP, from, fromP) {
return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
}
$rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error: " + message(to, toP, from, fromP), err); });
});

body {
margin-top: 6em;
}
.link {
text-decoration: underline;
color: blue;
}
.link:hover {
cursor: pointer;
}
.header {
position: fixed;
right: 0;
top: 0;
height: 6em;
width: 100%;
border-bottom: 1px solid gray;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css" />
<title>Plunk demonstrating ui-router issue</title>
</head>
<body ng-app="demonstrateissue">
<div ui-view>ui-view not populated</div>
<div class="header">
Current URL: <b>{{$location.url() }}</b> <br>
Current State: <b>{{$state.current.name }}</b> <br>
Current Params: <b>{{$state.params | json }}</b><br>
</div>
<br/>
<br/>
<div ng-controller="myController">
{{book}}
<br/>
<a ui-sref="bookDetails({bookId: 6789.1011})">Change params to book with dot</a><br/>
<button ng-click="viewBookDetails()">View Book Details</button>
</div>
</body>
</html>

Answer 3

Si está utilizando connect-history-api-fallback en su servidor (como lo hace lite-server ), las URL con un punto no se reescriben por defecto.

código connect-history-api-fallback

if (parsedUrl.pathname.indexOf(''.'') !== -1) {
logger(
''Not rewriting'',
req.method,
req.url,
''because the path includes a dot (.) character.''
);
return next();
}

Comenzando con connect-history-api-fallback versión 1.2.0, las URL con puntos están permitidas y usted puede resolver este problema usando aa rewrite roule

Ejemplo

Si su URL con punto es /api/test/:id (por ejemplo /api/test/123.34 ) y su aplicación angulares vive en la página index.html puede agregar una regla de reescritura a connect-history-api-fallback como esta

rewrites: [
{
from: /^//api//test//[0-9]+/.[0-9]+$/,
to: ''index.html''
}
}
]