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

Dans mon cas, en utilisant Angular et Spring Boot J'ai résolu ce problème dans mon SecurityConfig :

http.csrf().disable().cors().disable()
            .authorizeRequests()
            .antMatchers(HttpMethod.POST, "/register")
            .anonymous()
            .anyRequest().authenticated()
            .and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

Ou remplacez cette ligne par :

http.csrf().disable().cors().and()

Et l'autre option de test est pour supprimer la dépendance de pom.xml et d'autres codes en dépendent. C'est comme désactiver la sécurité de Spring :

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-security</artifactId>
     <version>2.3.3.RELEASE</version>
</dependency>

Answer 2

Si vous utilisez pied à ressort pour le codage côté serveur, veuillez ajouter un filtre à servlets et ajoutez le code suivant de votre application spring-boot. Cela devrait fonctionner. Ajout de "Access-Control-Allow-Headers", "*" est obligatoire. Création de proxy.conf.json n'est pas nécessaire.

    @Component
@Order(1)
public class MyProjectFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Max-Age", "86400");
        chain.doFilter(req, res);
    }
}

Answer 3

J'ai essayé d'ajouter la déclaration ci-dessous sur mon API sur le serveur express et cela a fonctionné avec Angular8.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET , PUT , POST , DELETE");
    res.header("Access-Control-Allow-Headers", "Content-Type, x-requested-with");
    next(); // Important
})

Answer 4

Para nodejs utilisez le code ci-dessous

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

Answer 5

Si vous utilisez Spring boot 2, vous pouvez ajouter l'annotation CrossOrigin dans la classe du contrôleur.

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

ça a marché pour moi !