Question

我正在准备一个基于微服务的示例应用程序，在这里我想使用Spring Boot编写的后端API。现在我希望它从我的angular 5 UI应用程序中运行。

但是低于错误。我做了ctrl + F12，从控制台我得到了以下错误。

无法加载http://localhost:8080/contacts：所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:4200”。

Answer 1

您需要在基于Spring Boot的微服务中允许CORS（cross-origin resource sharing）。

Pivotal团队的本教程很好地解释了如何在Spring Boot应用程序中实现对CORS的支持：

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

如果您使用的是Spring Boot，建议仅声明一个WebMvcConfigurer bean，如下所示：

@Configuration
 public class MyConfiguration {

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

Answer 2

我建议使用角度代理配置。

1）在前端根目录中创建一个新文件（package.json文件旁边）。您可以随意命名文件，例如proxy.config.json。该文件包含一个javascript对象。

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

2）将“ ng start”脚本更改为package.json更改为"start": "ng serve --proxy-config proxy.config.json"

3）重新启动cli服务器（如有必要）

从您的angular-cli服务器到/ api的每次调用都将重定向到http://localhost:8080/api。这样，您无需触摸CORS配置，也不会影响生产安全性。

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

2 个答案: