如何从Amazon上的角应用程序的url中删除#(弹性豆茎)

I have an angular (1.5.9) app hosted on Amazons Elastic Beanstalk.

我有一个有棱角的(1.5.9)应用，托管在亚马逊的弹性豆茎上。

I want to remove the # from URLs and have followed this guide and others similar to it.

我想从url中删除#，并遵循这个指南和其他类似的指南。

update of app.js is done:

更新app.js:
```
$locationProvider.html5Mode(true);
```
update of index.html done:

更新索引。html完成:
```
<head>
    ...
    <base href="/">
</head>
```
update of all references are done:

更新所有参考资料:

/#/login -> /login

/ # /登录- > /登录
I have ssh'd to my amazon server and created a .htaccess file there:

我有ssh到我的amazon服务器，并在那里创建了.htaccess文件:

[ec2-user@ip-xxx-xx-x-xxx]$ ll -a /var/www/html total 12 drwxr-xr-x 2 root root 4096 22 maj 13.43 . drwxr-xr-x 6 root root 4096 1 maj 23.56 .. -rw-r--r-- 1 root root 339 22 maj 13.43 .htaccess

[ec2-user@ip-xxx- xxx]$ ll -a /var/www/html共12 drwxr-xr-x 2根4096 22 maj 13.43。xr-xr- x6根4096 1 maj 23.56。-rw-r- r- 1根33922 maj

with the content:

与内容:
```
RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
```

I have the index.html and the app.js files under the /src/main/resources/static directory

我有索引。在/src/主/资源/静态目录下的html和app.js文件。

Accessing www.mypage.com and navigating to www.mypage.com/about works great with NO # in the url, but refreshing the page gives 404.

访问www.mypage.com和浏览www.mypage.com/about非常有效，网址中没有#，但是刷新页面会得到404。

What am I doing wrong? How is this normally done on Amazon servers?

我做错了什么?这通常是如何在Amazon服务器上实现的?

2 个解决方案

#1

With inspiration from Mike's comment and some links here and here I chose to give up on .htaccess files, httpd.conf files or other such redirections on Amazon. Instead I simply added this controller to my Java Spring Boot backend:

在Mike的评论和这里和这里的一些链接的启发下，我选择放弃。htaccess文件httpd。conf文件或其他此类在Amazon上的重定向。相反，我只是将这个控制器添加到我的Java Spring引导后端:

package com.example

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class CatchAllController {
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

Using @RestController did NOT work for me, I had to use @Controller.

使用@RestController并不适合我，我必须使用@Controller。

The pattern matches everything that does not have a "." in it so resources like .jpg images are not matched. Also all other endpoints still gets matched first (I guess because they are more specific than this rule)

模式匹配所有没有“.”的内容，因此不匹配.jpg图像等资源。另外，所有其他端点仍然首先被匹配(我猜是因为它们比这个规则更具体)

Together with step 1-3 in my original question this makes everything work as intended, reloads work great and no # is required anywhere. And now I can control this within my familiar Java context, test on localhost easily and not get lost in mod_rewrite docs...

与我最初的问题中的第1-3步一起，这使得一切都能正常工作，重新加载工作非常好，任何地方都不需要#。现在我可以在我熟悉的Java上下文中控制它，轻松地在localhost上进行测试，而不会在mod_rewrite docs中丢失……

#2

To remove the # from the URL, you will need to set the HTLML5 mode in your config:

要从URL中删除#，需要在配置中设置HTLML5模式:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);   
}]);

Also set the base in the <head> tag of your index.html:

还可以在index.html的标签中设置base:

<head>
    ...
    <base href="/">
</head>

If you are using Angular 1.6 or higher, you will also need to update the hashPrefix (default !):

如果您使用的是角1.6或更高，您还需要更新hashPrefix(默认!):

$locationProvider.hashPrefix('');

#1

package com.example

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class CatchAllController {
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}