L'origine "http://localhost:4200" a été bloquée par la politique CORS dans Angular7.

Question

Je veux utiliser de http://5.160.2.148:8091/api/trainTicketing/city/findAll repos pour obtenir des villes dans mon projet angulaire.
J'ai utilisé la version 7.2.15 d'angular dans mon projet.
Lorsque vous obtenez cette url avec httpClient, vous obtenez l'erreur suivante :

 Access to XMLHttpRequest at 'http://5.160.2.148:8091/api/trainTicketing/city/findAll' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Alors qu'au travail correctement quand entrer url dans le navigateur et postman.

Pourquoi ?

Answer 1

Solution 1 - vous devez modifier votre backend pour qu'il accepte vos requêtes entrantes.

Solution 2 - utiliser le proxy Angular ver aquí

Veuillez noter que ceci est uniquement pour ng serve vous ne pouvez pas utiliser le proxy dans ng build

Remarque : la raison pour laquelle cela fonctionne via postman est que postman n'envoie pas de demandes de contrôle en amont alors que votre navigateur le fait.

Answer 2

Si vous utilisez Spring Boot, vous devez ajouter le lien d'origine dans l'annotation @CrossOrigin.

@CrossOrigin(origins = "http://localhost:4200")
@GetMapping("/yourPath")

Vous trouverez des instructions détaillées dans le https://spring.io/guides/gs/rest-service-cors/

Answer 3

Pour .NET CORE 3.1

J'utilisais redirection https juste avant d'ajouter cors middleware et capable de résoudre le problème en changeant l'ordre de ceux-ci

Ce que je veux dire c'est que :

changer ça :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

      ...

        app.UseHttpsRedirection();  

        app.UseCors(x => x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

      ...

     }

à ça :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

      ...

        app.UseCors(x => x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

        app.UseHttpsRedirection(); 

      ...

     }

À propos, autoriser les demandes provenant de n'importe quelle origine et méthode n'est peut-être pas une bonne idée pour la phase de production, vous devriez écrire vos propres politiques de cors à la production.

Answer 4

La solution doit ajouter ces en-têtes à la réponse du serveur.

'Access-Control-Allow-Origin', '*'
'Access-Control-Allow-Methods', 'GET,POST,OPTIONS,DELETE,PUT'

Si vous avez accès au serveur, vous pouvez les ajouter et cela résoudra votre problème.

OU

Vous pouvez essayer de concaténer ceci devant l'url :

https://cors-anywhere.herokuapp.com/

Answer 5

Vous êtes tous bons à Angular side même le facteur ne soulève pas la question de la politique des cors. Ce type de problème est résolu du côté back-end dans la plupart des cas.

Si vous utilisez Spring boot, vous pouvez éviter ce problème en plaçant cette annotation dans votre classe de contrôleur ou dans une méthode particulière.

@CrossOrigin(origins = "http://localhost:4200")

Dans le cas d'une configuration globale avec Spring Boot, configurez les deux classes suivantes :

`

@EnableWebSecurity
@AllArgsConstructor

public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
    public void configure(HttpSecurity httpSecurity) throws Exception{
        httpSecurity.csrf().disable()
        .authorizeRequests()
        .antMatchers("/api1/**").permitAll()
        .antMatchers("/api2/**").permitAll()
        .antMatchers("/api3/**").permitAll()

}
`

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("*")
                .maxAge(3600L)
                .allowedHeaders("*")
                .exposedHeaders("Authorization")
                .allowCredentials(true);
    }