Załóżmy, że Project to nasza klasa POJO. Następująca funkcja umożliwia usunięcie wiersza z bazy danych. Z powodzeniem działa z żądaniami POSTMAN.

@RestController
@RequestMapping(value = "/project")
@CrossOrigin
public class ProjectController {

    private final ProjectServiceImpl projectServiceImpl;

    ------------
    @DeleteMapping
    @RequestMapping("/delete/{id}")
    public ResponseEntity<Boolean> deleteProject(@PathVariable Long id) {
        boolean result = projectServiceImpl.delete(id);
        return ResponseEntity.ok(result);
    }
    ------------
}

Ale żądania z projektu Angular są odrzucane z komunikatem 403. Na ekranie konsoli pojawia się następujący komunikat.

Angular error without pre-flight

Po kilku poszukiwaniach. Dowiedziałem się, że aplikacja musi odpowiadać na żądania pre-flight za pomocą 200. Aby to zapewnić, do kontrolera dodano następującą funkcję.

@GetMapping
@RequestMapping("/delete/{id:[0-9]+}")
public ResponseEntity.BodyBuilder retreive(@PathVariable Long id) {
    return ResponseEntity.ok();
}

Użyłem wyrażenia regularnego do mapowania żądań, ponieważ bez niego Spring Framework rzuca /project/delete/{id} już zmapowane z inną funkcją. Angular uzyskuje w ten sposób swoje 200OK na żądanie pre-flight. Ale odpowiedź aplikacji to 406 dla operacji usuwania. Angular wysyła adres URL http://localhost:8080/project/delete/2 do aplikacji. Jeśli wyślę ten sam link bez funkcji dla CORS. Wiersz o identyfikatorze z 2 zostanie pomyślnie usunięty. Czy coś mi brakuje?

Console error despite have a CORS support

Źródła:

Dlaczego Angular wysyła wiadomość OPCJE przed DELETE

Jak dodać obsługę CORS do aplikacji Spring Boot

Aby zaimplementować serwer proxy po stronie serwera: proxy.conf.json

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

Zmodyfikowana sekcja w angular.json

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "issue-management:build",
        "proxyConfig": "proxy.conf.json"
      },

A projekt Angular rozpoczął się od ng serve --proxy-config proxy.conf.json, ale wynik się nie zmienił. Dodatkowo zastosowane zostały sugestie z tego artykułu. t zmienić.

0
Kerim 14 marzec 2020, 17:38

2 odpowiedzi

Najlepsza odpowiedź

Twoje aplikacje działają na dwóch różnych portach, co powoduje problem z CORS.

Dodaj serwer proxy (plik proxy.conf.json) w aplikacji Angular.

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

I uruchom to ng serve --proxy-config proxy.conf.json

Odniesienie do dokumentu Angular


Aktualizacja:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
            .allowedMethods("*")
            .allowedOrigins("http://localhost:4200");
        }
    };
}

Zadziałało, Z jakiegoś powodu proxy Angular nie działa

1
Pavan Kumar Jorrigala 30 marzec 2020, 23:07

Jeśli używasz zabezpieczenia sprężynowego, użyj:

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            // by default uses a Bean by the name of corsConfigurationSource
            .cors(withDefaults())
            ...
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

Zobacz dokumentację wiosenną: https: //docs.spring .io / spring-security / site / docs / current / reference / html5 / # cors

Konfiguracja globalna:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Value("${cors.origins.urls}")
    public String allowedOrigins;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedOrigins(allowedOrigins.split(","));

    }
}
1
Gloria Figueroa 14 marzec 2020, 17:15