I have a spring-boot application that has a few views set up. I also have bundled an Angular2 app. When I load the Angular2 app, all works fine, however, when I try to deep link to a route within the application, Spring MVC is intercepting the call, failing to find an associated view and returning the error page.
http://localhost:8080/index.html will load the Angular2 application which then re-writes the URL to be just http://localhost:8080/. If I then navigate to the route I want e.g. http://localhost:8080/invite/12345, then the route loads and works as expected. Hitting http://localhost:8080/invite/12345 directly returns the standard Spring MVC error page.
However, if I run the Angular2 app as a standalone application (not served up by spring-boot), then hitting that link directly works as expected. it loads the index.html, fires the route and shows me the data I want.
How can I, via Java configuration, tell Spring to ignore the /invite/** path (and other paths too as my Angular2 app grows) so I can deep-link to routes within my Angular2 application. Here's the current Java configuration:
#SpringBootApplication
#EnableResourceServer
public class AuthserverApplication extends WebMvcAutoConfigurationAdapter {
public static void main(String[] args) {
SpringApplication.run(AuthserverApplication.class, args);
}
#Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/login").setViewName("login");
registry.addViewController("/oauth/confirm_access").setViewName("authorize");
registry.addViewController("/success").setViewName("success");
}
#Bean
public ViewResolver getViewResolver() {
final InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setSuffix(".html");
return resolver;
}
}
This project is inheriting from spring-boot 1.3.3.RELEASE:
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.3.RELEASE</version>
</parent>
Based on your answer, I config like this and it's worked.
#RequestMapping(value = "/*", method = RequestMethod.GET)
#Override
public String index()
{
return "index";
}
#Override
#RequestMapping(value = "/login/*", method = RequestMethod.GET)
public String login()
{
return "redirect:/#/login";
}
So we can access to localhost:8080/angular-app/login/ without 404 error.
So the way I got round this in the end was to link directly to the index.html page so that it forced the angular2 app to load e.g.:
http://localhost:8080/index.html/#/invite/12345
Related
I'm working on a full-stack app having spring boot v2.7.5 as the backend and Angular v15 as the front end. I use IntelliJ IDEA IDE for development. Locally, spring boot runs on http://localhost:8080 and angular runs on http://localhost:4200. I use Gradle to build the project a single war file and which would be deployed on an external tomcat server.
Following is the project structure:
I have 3 build.gradle files, 1 for frontend , 1 for backend, and 1 for global. When I run the global build.gradle file, it would call call build.gradle from fronend folder which builds angular project and copies all the build files and put them into backend/src/main/resources/static folder. Next, build.gradle from the backend gets called which would build the final war file to be deployed on the external tomcat server.
The reason I'm putting frontend build files (index.html, some .js files) into backend/src/main/resources/static is the fact that Spring Boot Serves static content from that location. more details .
So the static directory looks like this after adding frontend build files:
When I try to access http://localhost:8080, it loads index.html from the static folder.
So far it is good. When I click the login button, internally it calls the backend API and moves to the next page (home page i.e., http://localhost:8080/fe/appInstances).
Now if I refresh the page, it gives me the following 404 Whitelabel Error Page.
I understand that since this is spring-boot as it is looking for a definition of the http://localhost:8080/fe/appInstances API endpoint in the java code.
To fix this, I have created the following IndexController.java class which should redirect all the frontend rest endpoints to index.html which is present in main/resources/static folder.
IndexController.java
#Controller
public class IndexController {
#GetMapping("/")
public String index() {
return "redirect:/index";
}
#GetMapping("/fe/*")
public String anyFrontEndApi() {
return "index";
}
}
But now, I get the following Whitelabel error page about Circular view path [index]: would dispatch back to the current handler URL [/fe/index] again.
I have tried changing #Controller to #RestController and changing the return type to ModelandView or something like this. But irrespective of all, it is still giving me the Whitelabel Error Page about Circular view path...
#RestController
public class IndexController {
#GetMapping("/")
public String index() {
return "redirect:/index";
}
#GetMapping("/fe/*")
public ModelAndView anyFrontEndApi() {
ModelAndView mv = new ModelAndView();
mv.setViewName("index");
return mv;
}
}
Am I missing something here? Can someone please suggest me a fix for this?
PS: #justthink addressed this situation here. But I don't know how to do reverse proxy way.
We had this situation of page refresh for Angular and Springboot and we resolved this by adding the below Configuration class extending WebMvcConfigurerAdapter
#Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**/*")
.addResourceLocations("classpath:/static/")
.resourceChain(true)
.addResolver(new PathResourceResolver() {
#Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource requestedResource = location.createRelative(resourcePath);
return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
: new ClassPathResource("/static/index.html");
}
});
}
}
So basically, we are telling Springboot that if we have the resource, use the same if not then redirect it to index.html.
Now, to handle the path in Angular, it depends on how you would have written your routes. If the path is available, you show the page, if not, display 404 page.
Hope this helps.
Update 1:
WebMvcConfigurerAdapter is deprecated. If this causes any trouble, then instead of extending the class WebMvcConfigurerAdapter, you can implement WebMvcConfigurer
If you see the whitelabel error says that "this application has no explicit mapping for /error".
That means if no path is matched with the paths that are defined in controller mappings, it forwards the request to "/error" route. So we can override this default behaviour.
Spring provides ErrorController interface to override this functionality
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class CustomErrorController implements ErrorController {
#RequestMapping("/error")
public String handleError() {
return "forward:/";
}
}
Hi everyone i am searching now the full day and i do not found a solution.
I could server static file in a mvc spring application without problems but with webflux i do not found a way how i can serve them.
I put in ressource a folder with the name static and in there its a simple html file.
My configuration looks like:
#Configuration
#EnableWebFlux
#CrossOrigin(origins = "*", allowedHeaders = "*")
public class WebConfig implements WebFluxConfigurer {
#Bean
public RouterFunction<ServerResponse> route() {
return RouterFunctions.resources("/", new ClassPathResource("static/"));
}
When i start the application and go to localhost i just received a 404 response.
I also try it with adding:
spring.webflux.static-path-pattern = /**
spring.web.resources.static-locations = classpath:/static/
to the application.properties but i still received the 404 not found.
Even when i added Thymeleaf to my dependencies i still get 404.
Hopefully someone knows what to do.
What i think you are missing is basically to tell on what type (GET) of request you want to serve data.
Here is an old pice of code i found that i have used when i served a react application from a public folder in the resource folder.
When doing a GET against /* we fetch the index.html. If the index is containing javascript that does returning requests they are caught in the second router, serving whatever is in the public folder.
#Configuration
public class HtmlRoutes {
#Bean
public RouterFunction<ServerResponse> htmlRouter(#Value("classpath:/public/index.html") Resource html) {
return route(GET("/*"), request -> ok()
.contentType(MediaType.TEXT_HTML)
.bodyValue(html)
);
}
#Bean
public RouterFunction<ServerResponse> imgRouter() {
return RouterFunctions
.resources("/**", new ClassPathResource("public/"));
}
}
I do have a react-application using BrowserRouter for routing between pages. I also have a Java Backend with Spring Boot.
When I start the backend and frontend seperataly with an applicationRunner and npm start the browserrouter works perfectly. For example http://localhost:3000/home works fine. And also localhost:8080/api/collection/{id} works fine with this code
Java-backend:
#RestController
#RequestMapping(value = "/api", produces = MediaType.APPLICATION_JSON_VALUE)
public class ApiController {
#Autowired
private BeregningstjenestePoller poller;
#GetMapping("/collection/{id}")
public CollectionV2 withId(#PathVariable String id) {
return poller.getCollectionWithId(id);
}
React-frontend:
<BrowserRouter>
<Route exact path={'/'}>
<StartPage title={'Hello'} />
</Route>
<Route exact path={'/home'}>
<HomePage />
</Route>
</BrowserRouter>
But when I try to start the servers together with java -jar ./bapplication-main/target/beregning-oversikt-main-0-SNAPSHOT.jar the trouble starts.
The application is now running on localhost:8080, so the starting page works, but localhost:8080/home doesnt work anymore, but localhost:8080/api/collection/{id} still works.
My guess is some trouble with Spring Boot and React routing together, but I cant find an answer
Might the Route "/" is defined in both reactjs and spring boot.
So remove index method with "/" in spring boot IndexController, below method need to be removed.. it will work with React home page.
#Controller
public class IndexController {
#GetMapping("/")
public String index(Model model) {
return "index";
}
}
I'm integrating single page application into Spring Boot project. The context of the UI (SPA) is http://localhost:8080/ui/
The context of Spring Boot application itself is http://localhost:8080/. Controllers have different context that has nothing to do with UI context.
There is a case when UI changes browser address line to URL that server does not know about, but does not send request to server. After such thing, if I refresh the page, server responds with 404. However I need to return the default index.html page.
Example: I go to http://localhost:8080/ui/, UI changes this to http://localhost:8080/ui/mainpage. I refresh the page and get 404.
I have found similar question, but I would like to do it a bit differently, then answered there.
I need to return default resource (index.html) when there is a request to http://localhost:8080/ui/**, if request is made to http://localhost:8080/context1/blablabla, I would like to return 404.
After debugging and googling about this I came with next solution:
#Configuration
public static class WebConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/ui/**")
.addResourceLocations("/ui/")
.resourceChain(false)
.addResolver(new PathResourceResolver() {
#Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource resource = super.getResource(resourcePath, location);
return Objects.isNull(resource) ? super.getResource("index.html", location) : resource;
}
});
}
#Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ui/").setViewName("index.html");
}
}
The approach here is to add manually PathResourceResolve and override its method getResource, so when resource is null, call for index.html resource. This way I can be sure that I return default page only when request is made to http://localhost:8080/ui/** and all other requests will return 404 as usual.
I do not think that this is the right solution, to me it looks like hack. I thought maybe resource handlers have some config like default resource, but I did not found anything about that.
My question is how to do it properly?
Appreciate any suggestions.
Right now, all 404/500 results in a json error message.
How can I configure it so that on all 404/500 just redirect to a specific error page?
I've added the following to my initializer class:
#Bean
public EmbeddedServletContainerCustomizer containerCustomizer() {
return container -> {
container.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/error/errorpage"));
container.addErrorPages(new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/error/errorpage"));
};
}
But now it just redirects to a blank page...
Solution? I basically implemented the error controller and force all to redirect to errorpage. My errorpage is a jsp that lives right under WEB-INF/pages. Now is this correct?
#RestController
#RequestMapping("/errorpage")
public class SimpleErrorController implements ErrorController {
#Autowired
public SimpleErrorController(ErrorAttributes errorAttributes) {
Assert.notNull(errorAttributes, "ErrorAttributes must not be null");
}
#Override
public String getErrorPath() {
return "/errorpage";
}
#RequestMapping(produces = {"text/html"})
public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) {
response.setStatus(400);
return new ModelAndView("errorpage");
}
}
EDIT: You would likely need to remove your Bean definition for this to work, as I see you have added that after I have submitted my answer.
Add thymeleaf dependency to your pom:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Depending on your spring boot version, add one of the two to your application properties file:
error.whitelabel.enabled=false
or
server.error.whitelabel.enabled=false
Create /src/main/resources/templates folder.
Add a file called error.html to this folder with the html you wish to display.
What we've done is use the thymeleaf templating engine to consume the default error.html file, and told Spring Boot not to use its default whitelabel error page.