Spring Boot 和 Angular 2 的 URL 处理问题

Posted 2023-02-27

【中文标题】Spring Boot 和 Angular 2 的 URL 处理问题

【英文标题】：Problems with URL handling with Spring Boot and Angular 2

【发布时间】：2016-12-01 06:24:35

【问题描述】：

我正在尝试使用 maven 开发一个应用程序，后端使用 Spring Boot，前端使用 Angular 2。

angular 2 前端位于项目的src/main/resources/static 目录中。

当我在浏览器中输入http://localhost:8080/ URL时，一切都很好：我可以访问angular 2前端，并且前端可以与其余的api完美通信。我的 Angular 2 路由工作正常：当我点击前端的链接时，我转到正确的页面，浏览器 url 栏显示正确的内容（即http://localhost:8080/documents）

但问题是当我尝试直接在浏览器中编写相同的 URL 时。 Spring 接管了前端，并表示 /documents 没有映射。

有没有办法告诉 spring boot 只“收听”/api/* URL 并将所有其他 URL “重定向”到前端？

这是我的 Spring Controller 类：

@RestController
@RequestMapping("/api")
public class MyRestController 

    @Autowired
    private DocumentsRepository documentRepository;

    @CrossOrigin(origins = "*")
    @RequestMapping(value = "/documents/list",
            method = RequestMethod.GET,
            produces = "application/json")
    public Iterable<RfDoc> findAllDocuments() 
        return documentRepository.findAll();
    

这是主要的应用程序类：

@SpringBootApplication
public class Application 

    public static void main(String[] args) 
        SpringApplication.run(Application.class, args);
    

这是我的 app.route.ts：

import  provideRouter, RouterConfig   from '@angular/router';
import  DocumentComponent  from './doc.component';  

const routes: RouterConfig = [
    
        path: '',
        redirectTo: 'documents',
        pathMatch: 'full'
    ,
    
        path: "documents",
        component: DocumentComponent
    
];

export const appRouterProviders = [
    provideRouter(routes)
];

【问题讨论】：

有一种方法可以只听 /api/* 。为此，您需要有一个过滤器。

我该怎么做？我对这些东西很陌生...

【参考方案1】：

好的，所以我找到了一个非常好的解决方案（至少对我来说）：我将我的位置更改为旧的 AngularJS 1.X 方式，在 URL 中使用 # （即 http://localhost:8080/#/documents ）。

为了获得这种行为，我像这样改变我的引导程序

import  bootstrap       from '@angular/platform-browser-dynamic';
import  HTTP_PROVIDERS  from '@angular/http';

import  AppComponent          from './app.component';
import  appRouterProviders    from './app.routes';
import  AuthService           from './auth.service';

bootstrap(AppComponent, [AuthService,
    appRouterProviders,
    HTTP_PROVIDERS,
     provide: LocationStrategy, useClass: HashLocationStrategy 
]);

希望这可以帮助别人！

【讨论】：

不要使用 uglt 标签符号……只需保持 html5 定位策略并将所有 angular2 的路由重定向到 index.html 文件。不要重定向所有路由，因为您将需要它们作为端点资源（其余控制器）。

如何进行重定向？

Eric 请创建一个问题并发布链接，以便我可以粘贴一些代码。