Angular.js-如何从URL中删除＃-错误：无法在“历史记录”上执行“ pushState”：
[英]Angularjs - How to remove the # from the url - Error: Failed to execute 'pushState' on 'History':
问题描述
I tried everything in other posts regarding removing the fragment identifier (#). 
我在其他帖子中尝试了有关删除片段标识符（＃）的所有内容。 Everything works as it should with the # identifier, but it would be a nice improvement for my project. 一切都可以使用＃标识符进行，但对我的项目而言这将是一个不错的改进。
- I configured the $locationProvider and set html5Mode to true 我配置了$ locationProvider并将html5Mode设置为true
- Set the
<base href="app" />in my index.html tryed also<base href="/" />.在我的index.html中设置<base href="app" />，也可以尝试<base href="/" />。 I used<base href="/" />我使用了<base href="/" /> - Without setting a base
requireBase: false.不设置基本requireBase: false。 - Wrapping
$locationProvider.html5Mode(true)intoif(window.history && window.history.pushState)to check browser support for the html5 history API as someone suggested将$locationProvider.html5Mode(true)包装到if(window.history && window.history.pushState)以检查浏览器是否支持html5历史API - I wrote a rule in web.config as someone else suggested. 正如别人建议的那样，我在web.config中编写了一条规则。
- I tried all I could find after I googled it. 我搜索了所有我能找到的东西。
I am getting this error: 我收到此错误：
angular.js:13708 Error: Failed to execute 'pushState' on 'History': A history state object with URL ' http://sales/?_ijt=d1r1ladp5ro1tvflefsdpnfvd4 ' cannot be created in a document with origin ' http://localhost:52471 ' and URL ' http://localhost:52471/BeerbayCRM/BeerbayCRM/app/index.html?_ijt=d1r1ladp5ro1tvflefsdpnfvd4 '. angular.js：13708错误：无法在“历史记录”上执行“ pushState”：无法在源为“ http：// localhost ”的文档中创建URL为“ http：// sales /？_ijt = d1r1ladp5ro1tvflefsdpnfvd4 ”的历史状态对象：52471 '和URL'http ：// localhost：52471 / BeerbayCRM / BeerbayCRM / app / index.html？_ijt = d1r1ladp5ro1tvflefsdpnfvd4 '。
See the list of available environment variables Your help will be very much appreciated! 请参阅可用环境变量列表。我们将非常感谢您的帮助！ Thank you. 谢谢。
Here is my code: 这是我的代码：
app.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: "views/productsView.html" }) .when("/products", { templateUrl: "views/productsView.html" }) .when("/sales", { templateUrl: "views/salesView.html" }) .when("/charts", { templateUrl: "views/chartsView.html" }) .otherwise({ templateUrl: "views/productsView.html" }); if (window.history && window.history.pushState) { $locationProvider.html5Mode({ enabled: true }); } } ]) .controller("routeCtrl", function($scope, $location) { $scope.setRoute = function(route) { $location.path(route); } });
<!DOCTYPE html> <html ng-app="myApp"> <head> <!--.....all the dependencies are here.....--> <base href="app" /> </head> <body ng-controller="myAppCtrl"> <div class="navbar navbar-inverse"> <a class="navbar-brand" href="#">Beerbay</a> </div> <div ng-controller="routeCtrl" class="col-sm-1"> <a ng-click="setRoute('products')" class="btn btn-block btn-primary btn-lg">Products</a> <a ng-click="setRoute('sales')" class="btn btn-block btn-primary btn-lg">Sales</a> <a ng-click="setRoute('charts')" class="btn btn-block btn-primary btn-lg">Charts</a> </div> <ng-view/> </body> </html>
Update: It is partially working after I started the application in a node server separate than one WebStorm uses. 更新：在我在不同于一个WebStorm使用的节点服务器上启动该应用程序后，它部分工作。 After I hit refresh page I get just a short message on the page: "Cannot GET /...__partial view name* " 在单击刷新页面后，页面上仅显示一条短消息：“无法获取/...__部分视图名称*”
1 个解决方案
解决方案1
1 2016-08-18 19:15:17
You need to have server side redirects in place... when the server gets a request for example.com/yoursite/some-page by default it is just going to try and load some index files from that location when it doesn't find them it will 404. You need to setup a server side redirect in the web server config so any missed paths that start with /yoursite/ redirect to /yoursite/index.html so your angular routing can handle it. 您需要将服务器端重定向到位...默认情况下，当服务器收到例如example.com/yoursite/some-page的请求时，它将尝试尝试从该位置加载一些索引文件它们将为404。您需要在Web服务器配置中设置服务器端重定向，以便所有以/ yoursite /开头的丢失路径都重定向到/yoursite/index.html，以便您的角度路由可以处理它。
https://docs.angularjs.org/guide/$location#server-side https://docs.angularjs.org/guide/$location#server-side
See also 也可以看看
Reloading the page gives wrong GET request with AngularJS HTML5 mode 使用AngularJS HTML5模式重新加载页面会给出错误的GET请求
If you now have a node server that's handling the requests you'll need to configure the node server to deal with the redirects, personally have only done it with Apache and Nginx though. 如果您现在拥有一个处理请求的节点服务器，则需要配置该节点服务器以处理重定向，但是个人而言仅使用Apache和Nginx完成了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.