没有'Access-Control-Allow-Origin'角度与Spring-boot / Http调用角度2

Question

  

我正在尝试从 Spring启动服务器 中获取 角度应用程序 的数据   通过 angular http call 。此外，我还为spring boot应用程序添加了安全性依赖项。

当我尝试使用浏览器时，这将会到来。

一旦我在Intellij的控制台中输入密码，它就会显示响应。

  

当我尝试使用angular http调用时，它会失败并显示错误   主题。

我的角度组件有以下代码。

constructor(private http: HttpClient) { 
    http.get('http://localhost:8080/resource').subscribe(data => this.greeting = data);
}

我的春季启动应用程序有以下代码

@RequestMapping("/resource")
public Map<String,Object> home() {
      Map<String,Object> model = new HashMap<String,Object>();
      model.put("id", UUID.randomUUID().toString());
      model.put("content", "Hello World");
      return model;
}

此外，我已阅读跨源资源共享（CORS），但尚不清楚如何将这些应用于角度。

我的错误是：

Answer 1

  

我在角度应用中所做的是正确的，必须纠正   我的春季启动应用程序。

我做的唯一更改是创建名为 WebSecurityConfig的配置文件。

@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        UrlBasedCorsConfigurationSource source = new
                UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
        return source;
    }
}

Answer 2

在scala + spring boot中，你可以添加cors mapping

class WebAppConfig extends WebMvcAutoConfigurationAdapter {

  @Value("${cors.origin}")
  private val corsOrigin: String = "all"

  override def addCorsMappings(registry: CorsRegistry): Unit = {
    if(corsOrigin=="all"){
      registry.addMapping("/**")
    }else{
      registry.addMapping("/**").allowedOrigins(corsOrigin.split(","):_*)
    }
  }

}

Answer 3

检查服务器是否也接受http方法'OPTIONS'。因为如果域是不同的浏览器默认发送OPTIONS请求，响应应该是成功200.如果它是一个弹簧后端

public class CorsFilter implements Filter {

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    final HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, res);
    }
}

Answer 4

控制器中的每个方法都需要单独允许Cross-Origin。只需在方法的顶部添加@CrossOrigin（originins =“*”），希望这样做。

@CrossOrigin(origins = "*")
@RequestMapping("/resource")
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
}