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

Startup.cs dans WebAPI.

app.UseCors(options => options.AllowAnyOrigin());  

Dans la méthode ConfigureServices :

services.AddCors(c =>  
{  
    c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());  
});

Dans le contrôleur :

[HttpGet]  
     [Route("GetAllAuthor")]  
     [EnableCors("AllowOrigin")]

Answer 2

Pour un test temporaire pendant le développement, nous pouvons le désactiver en ouvrant Chrome avec la sécurité web désactivée comme ceci.

Ouvrez un terminal de ligne de commande et allez dans le dossier où chrome est installé, à savoir C:\Program Fichiers (x86) \Google\Chrome\Application

Entrez cette commande :

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Une nouvelle fenêtre de navigateur s'ouvrira avec la sécurité web désactivée. Utilisez-la uniquement pour tester votre application.

Answer 3

Suivez les étapes suivantes

1. Ajoutez la dépendance cors. Tapez ce qui suit dans cli à l'intérieur du répertoire de votre projet

npm install --save cors

2. Inclure le module dans votre projet

var cors = require('cors');

3. Enfin, utilisez-le comme un intergiciel.

app.use(cors());

Answer 4

Si votre projet est un projet .net Core 3.1 API.

mettez à jour votre Startup.cs dans votre projet .net core pour :

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }
    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            {
                builder.WithOrigins("http://localhost:53135",
                                    "http://localhost:4200"
                                    )
                                    .AllowAnyHeader()
                                    .AllowAnyMethod();
            });
        });
        services.AddDbContext<CIVDataContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("CIVDatabaseConnection")));
        services.AddControllers();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseCors(MyAllowSpecificOrigins);

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

    }
}

Answer 5

1 : Créez une classe WebMvcConfig et étendez-la comme indiqué dans l'exemple ci-dessous. WebMvcConfiguration et de passer outre addCorsMappings méthode.

2 : Surtout, n'oubliez pas de le faire @Configuration car il doit être chargé avec la classe principale de Spring pour permettre le croisement des origines.

  @Configuration
    public class WebMvcCofig implements WebMvcConfigurer{
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/*")
                    .allowedOrigins("*")
                    .allowedMethods("*")
                    .allowedHeaders("*")
                    .allowCredentials(true);
        }
    }