无法从我的Angle 5项目中启动Spring Boot Rest API

Question

I am preparing a sample application based on Micro-service, where i want to hit my back-end API written in spring boot. now i want it to run from my angular 5 UI application.

But getting below error. i did ctrl+F12 and from the console i got below error.

Failed to load http://localhost:8080/contacts : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:4200 ' is therefore not allowed access.

Answer 1

You need to allow CORS ( cross-origin resource sharing ) in your spring boot based microservice.

This tutorial from Pivotal Team nicely explains how to achieve CORS support in Spring Boot applications:

https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

If you are using Spring Boot, it is recommended to just declare a WebMvcConfigurer bean as following:

@Configuration
 public class MyConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
 }

Answer 2

I suggest to use an angular proxy configuration.

1) Create a new file in the frontend root directory (next to package.json file). You can name is file whatever you want, proxy.config.json for example. This files contains a javascript object.

 {
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

2) Change the 'ng start' script into package.json to "start": "ng serve --proxy-config proxy.config.json"

3) Restart the cli server (if necessary)

Each calls from your angular-cli server to /api will be redirected to http://localhost:8080/api . This way, yo don't have to touch the CORS config and will not affect the production security.