web-dev-qa-db-fra.com

React + ASP.NET.Core: aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée

En fait ce n'est pas un post duplication , je connais une partie du titre demandé plusieurs fois dans la communauté stackoverflow , je lis tout messages et réponses, mais je pense que mon problème et les technologies que j'ai utilisées sont différents.

Je dois tout d'abord mentionner ASP.NET Core WEB/API est mon application dorsale et Reactjs est mon application frontale.

J'ai lu CORS et j'ai découvert que je dois activer CORS sur ASP.NET App et mettre 'Access-Control-Allow-Origin':'*' sur l'en-tête de ma demande, mais j'ai toujours l'erreur ci-dessous lorsque j'appelle une API:

Aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée. L'origine ' http: // localhost: 808 ' n'est donc pas autorisée à accéder. La réponse avait le code d'état HTTP 500. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "no-cors" pour récupérer la ressource avec CORS désactivé.

C'est mon Startup.cs code lié à CORS:

public void ConfigureServices(IServiceCollection services)
{

    // other lines of code
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll",
            builder =>
            {
                builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
            });
    });

    services.Configure<MvcOptions>(options =>
    {
        options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));
    });
    // other lines of code
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    app.UseCors("AllowAll");
    app.UseAuthentication();
    app.UseMvc();
}

Voici mon code de réaction:

function save(message) {
    const requestOptions = {
        method: 'POST',
        mode: 'cors',
        headers: { ...authHeader(), 
            'Content-Type': 'application/json',    
            'Access-Control-Allow-Origin':'*',

    },
        body: JSON.stringify(message)               
    };
    return fetch(config.apiUrl + '/message/save', requestOptions).then(handleResponse, handleError);
}

Merci d'avoir répondu.

c#reactjsasp.net-core.net-corecors
7
Siavash

Après deux jours difficiles, j'ai finalement découvert comment résoudre mon problème. En fait, l'un de vos commentaires était un bon indice pour moi.

@ kirk-larkin a déclaré:

La réponse avait le code d'état HTTP 500 est la clé ici. Lorsqu'il y a une exception dans votre projet ASP.NET Core, les en-têtes CORS sont effacés. Vous devriez essayer de découvrir pourquoi une exception est levée.

J'ai tracé mon code plusieurs fois, puis j'ai découvert que j'oublie d'enregistrer un service que j'ai utilisé dans mon contrôleur dans Startup.cs.

J'ai appelé ces codes ci-dessous dans Startup.cs et mon problème a été résolu.

services.AddScoped<IMessageService, MessageService>();
4
Siavash

J'ai eu un problème similaire récemment. Dans mon cas, cela a commencé à fonctionner lorsque j'ai ajouté services.AddCors(); dans ma méthode ConfigureServices et cette partie du code

app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
   .AllowCredentials());

dans ma méthode Configure. N'oubliez pas d'ajouter ces AVANT appel UseMvc () dans les deux cas.

13
newbie

Avec ASP.NET Core 2.1, lorsque le contrôleur lève une exception, ce qui entraîne une erreur 500, les en-têtes CORS ne sont pas envoyés. Cela devrait être corrigé dans la prochaine version, mais jusque-là, vous pouvez utiliser un middleware pour résoudre ce problème.

voir

Notez également qu'avec les informations d'identification, vous devez ajouter explicitement WithOrigins avec l'hôte et le port car la plupart des navigateurs l'ignorent simplement autrement (voir https://stackoverflow.com/a/19744754/2477619 ) :

  app.UseCors(builder =>
    builder
      .WithOrigins("http://localhost:4200")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials()
  );
2
B12Toaster

J'ai eu le même problème lorsque j'ai créé mon application. J'ai téléchargé cette extension chrome et le problème a disparu. Peut-être que cela vous aide?

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

0
Fearcoder