Ce que j'essaye de faire
J'ai une API Web principale ASP.Net Core hébergée sur un plan gratuit Azure (code source: https://github.com/killerrin/Portfolio-Backend ).
J'ai également un site Web client que je souhaite faire consommer cette API. L'application cliente ne sera pas hébergée sur Azure, mais sera plutôt hébergée sur des pages Github ou sur un autre service d'hébergement Web auquel j'ai accès. Pour cette raison, les noms de domaine ne s'aligneront pas.
En regardant cela, je dois activer CORS du côté de l'API Web, mais j'ai essayé à peu près tout pendant plusieurs heures maintenant et il refuse de fonctionner.
Comment j'ai la configuration du client C'est juste un simple client écrit en React.js. J'appelle les API via AJAX dans Jquery. Le site React fonctionne donc je sais que ce n'est pas ça. L'appel de l'API Jquery fonctionne comme je l'ai confirmé dans la tentative 1. Voici comment je passe les appels
var apiUrl = "http://andrewgodfroyportfolioapi.azurewebsites.net/api/Authentication";
//alert(username + "|" + password + "|" + apiUrl);
$.ajax({
url: apiUrl,
type: "POST",
data: {
username: username,
password: password
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var authenticatedUser = JSON.parse(response);
//alert("Data Loaded: " + authenticatedUser);
if (onComplete != null) {
onComplete(authenticatedUser);
}
},
error: function (xhr, status, error) {
//alert(xhr.responseText);
if (onComplete != null) {
onComplete(xhr.responseText);
}
}
});
Ce que j'ai essayé
Tentative 1 - La `` bonne '' manière
https://docs.microsoft.com/en-us/aspnet/core/security/cors
J'ai suivi ce didacticiel sur le site Web de Microsoft jusqu'à un T, en essayant les 3 options pour l'activer globalement dans Startup.cs, en le configurant sur chaque contrôleur et en l'essayant à chaque action.
En suivant cette méthode, le Cross Domain fonctionne, mais uniquement sur une seule Action sur un seul contrôleur (POST sur le AccountController). Pour tout le reste, le Microsoft.AspNetCore.Cors
middleware refuse de définir les en-têtes.
J'ai installé Microsoft.AspNetCore.Cors
via NUGET et la version est1.1.2
Voici comment je l'ai configuré dans Startup.cs
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
// Add Cors
services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
// Add framework services.
services.AddMvc();
services.Configure<MvcOptions>(options =>
{
options.Filters.Add(new CorsAuthorizationFilterFactory("MyPolicy"));
});
...
...
...
}
// This method gets called by the runtime. Use this method to configure
//the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
// Enable Cors
app.UseCors("MyPolicy");
//app.UseMvcWithDefaultRoute();
app.UseMvc();
...
...
...
}
Comme vous pouvez le voir, je fais tout comme dit. J'ajoute Cors avant MVC les deux fois, et quand cela n'a pas fonctionné, j'ai essayé de mettre [EnableCors("MyPolicy")]
chaque contrôleur comme tel
[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class AdminController : Controller
Tentative 2 - Brute le forçant
https://andrewlock.net/adding-default-security-headers-in-asp-net-core/
Après plusieurs heures d'essais sur la tentative précédente, j'ai pensé que j'essaierais de le forcer brutalement en essayant de définir les en-têtes manuellement, les forçant à s'exécuter à chaque réponse. J'ai fait cela en suivant ce tutoriel sur la façon d'ajouter manuellement des en-têtes à chaque réponse.
Ce sont les en-têtes que j'ai ajoutés
.AddCustomHeader("Access-Control-Allow-Origin", "*")
.AddCustomHeader("Access-Control-Allow-Methods", "*")
.AddCustomHeader("Access-Control-Allow-Headers", "*")
.AddCustomHeader("Access-Control-Max-Age", "86400")
Ce sont d'autres en-têtes que j'ai essayés qui ont échoué
.AddCustomHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE")
.AddCustomHeader("Access-Control-Allow-Headers", "content-type, accept, X-PINGOTHER")
.AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Host, User-Agent, Accept, Accept: application/json, application/json, Accept-Language, Accept-Encoding, Access-Control-Request-Method, Access-Control-Request-Headers, Origin, Connection, Content-Type, Content-Type: application/json, Authorization, Connection, Origin, Referer")
Avec cette méthode, les en-têtes Cross Site sont correctement appliqués et ils apparaissent dans ma console développeur et dans Postman. Le problème est cependant que, même s'il réussit le Access-Control-Allow-Origin
test, le navigateur Web lance un ajustement sifflant (je crois)Access-Control-Allow-Headers
indiquant415 (Unsupported Media Type)
Donc, la méthode de la force brute ne fonctionne pas non plus
finalement
Quelqu'un a-t-il réussi à faire fonctionner cela et pourrait-il donner un coup de main, ou simplement être en mesure de me diriger dans la bonne direction?
ÉDITER
Donc, pour faire passer les appels d'API, j'ai dû arrêter d'utiliser JQuery et passer au XMLHttpRequest
format Pure Javascript .
Tentative 1
J'ai réussi à faire Microsoft.AspNetCore.Cors
fonctionner le en suivant la réponse de MindingData, sauf dans la Configure
méthode mettant l' app.UseCors
avant app.UseMvc
.
De plus, lorsqu'il est mélangé avec la solution API Javascript options.AllowAnyOrigin()
pour la prise en charge des caractères génériques, il a également commencé à fonctionner.
Tentative 2
J'ai donc réussi à faire fonctionner Attempt 2 (force brute) ... à la seule exception que le Wildcard pour Access-Control-Allow-Origin
ne fonctionne pas et que je dois donc définir manuellement les domaines qui y ont accès.
Ce n'est évidemment pas idéal puisque je veux juste que cette WebAPI soit largement ouverte à tout le monde, mais cela fonctionne au moins pour moi sur un site séparé, ce qui signifie que c'est un début
app.UseSecurityHeadersMiddleware(new SecurityHeadersBuilder()
.AddDefaultSecurePolicy()
.AddCustomHeader("Access-Control-Allow-Origin", "http://localhost:3000")
.AddCustomHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, PATCH, DELETE")
.AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Content-Type, Authorization"));
la source
415 (Unsupported Media Type)
problème, définissez un en-Content-Type
tête de demande surapplication/json
.Réponses:
Parce que vous avez une stratégie CORS très simple (Autoriser toutes les demandes du domaine XXX), vous n'avez pas besoin de la compliquer. Essayez d'abord de faire ce qui suit (une implémentation très basique de CORS).
Si vous ne l'avez pas déjà fait, installez le package CORS nuget.
Dans la méthode ConfigureServices de votre startup.cs, ajoutez les services CORS.
Ensuite, dans votre méthode Configure de votre startup.cs, ajoutez ce qui suit:
Maintenant, essayez. Les politiques sont utilisées lorsque vous voulez des politiques différentes pour différentes actions (par exemple, différents hôtes ou différents en-têtes). Pour votre exemple simple, vous n'en avez vraiment pas besoin. Commencez par cet exemple simple et modifiez-le selon vos besoins à partir de là.
Lectures complémentaires: http://dotnetcoretutorials.com/2017/01/03/enabling-cors-asp-net-core/
la source
app.UseCors
APRÈS `` app.UseMvc () ''. Les middlewares sont exécutés dans l'ordre dans lequel ils sont enregistrésoptions.DisableHttpsRequirement();
pour que tout cela fonctionne. Il semble qu'avec les paramètres https cors ne s'appliquaient pas.Dans ConfigureServices, ajoutez
services.AddCors();
AVANT les services.AddMvc ();Ajouter UseCors dans Configure
Le point principal est cet ajout
app.UseCors
, avantapp.UseMvc()
.Assurez-vous de déclarer la fonctionnalité CORS avant MVC afin que le middleware se déclenche avant que le pipeline MVC n'obtienne le contrôle et mette fin à la demande.
Une fois que la méthode ci-dessus fonctionne, vous pouvez la modifier, configurer une ORIGINE spécifique pour accepter les appels d'API et éviter de laisser votre API si ouverte à tout le monde
Dans la méthode configure, indiquez à CORS d'utiliser la stratégie que vous venez de créer:
Je viens de trouver cet article compact sur le sujet - https://dzone.com/articles/cors-in-net-core-net-core-security-part-vi
la source
Configure()
l'ordre n'est pas vraiment important ici à l'intérieurConfigureServices()
AllowCredentials()
avecAllowAnyOrigin()
comme ci - dessus. Pour utiliser,AllowCredentials()
vous devez définirWithOrigins()
. docs.microsoft.com/en-us/aspnet/core/security/…J'ai créé ma propre classe middleware qui a fonctionné pour moi, je pense qu'il y a quelque chose qui ne va pas avec la classe middleware .net core
et l'a utilisé de cette façon dans startup.cs
la source
if (!context.Request.Headers.ContainsKey(CorsConstants.Origin)) return this._next(context);
Dans mon cas, seule la
get
demande fonctionne bien selon la réponse de MindingData. Pour les autres types de demande, vous devez écrire:N'oubliez pas d'ajouter
.AllowAnyHeader()
la source
Pour développer la réponse de user8266077 , j'ai trouvé que je devais toujours fournir une réponse OPTIONS pour les demandes de contrôle en amont dans .NET Core 2.1-preview pour mon cas d'utilisation:
puis activé le middleware comme ça dans Startup.cs
la source
app.Use<CorsMiddleware>();
await _next(context)
et en définissant manuellement le code d'état et la réponse si cela se produit. J'ai également dû ajouter «autorisation» à Access-Control-Allow-Headers pour que la demande de contrôle en amont fonctionne lors des demandes de React qui nécessitent une autorisation.la source
J'avais du mal avec ça pendant DAYS.
J'ai finalement réussi à le faire fonctionner en passant
app.UseCors(CORS_POLICY);
au TOP deConfigure()
.Aussi:
Microsoft.AspNetCore.Cors
Auparavant, il s'agissait d'un package NuGet requis dans .Net Core 2 et versions antérieures; il fait désormais automatiquement partie de Microsoft.AspNetCore dans .Net Core 3 et supérieur.builder.AllowAnyOrigin()
et.AllowCredentials()
options CORS sont désormais mutuellement exclusives dans .Net Core 3 et supérieurhttps
. Une URL http semblait donner une erreur CORS quelle que soit la configuration CORS du serveur .Net Core. Par exemple,http://localhost:52774/api/Contacts
donnerait une erreur CORS; il suffit de changer l'URL enhttps://localhost:44333/api/Contacts
fonctionnant.Remarque supplémentaire :
la source
Aucune des procédures ci-dessus n'a aidé et j'ai ensuite lu l' article qui a résolu le problème.
Ci-dessous le code.
et
et en plus de ma méthode d'action
la source
app.UseCors()
) avec[EnableCors()]
dans la même application. Vous devez utiliser l'un ou l'autre - mais pas les deux: docs.microsoft.com/en-us/aspnet/core/security/… :Use the [EnableCors] attribute or middleware, not both in the same app.
essayez d'ajouter
jQuery.support.cors = true;
avant l'appel AjaxIl se peut également que les données que vous envoyez à l'API soient bancales,
essayez d'ajouter la fonction JSON suivante
puis dans vos données: objet changez-le en
la source
La solution la plus simple est d'ajouter
à Startup.cs.
la source
Je pense que si vous utilisez votre propre middleware CORS, vous devez vous assurer qu'il s'agit bien d'une requête CORS en vérifiant l'en- tête d' origine .
la source
Access-Control-Allow-Origin
tête n'a pas été émis par le serveur. En fait, j'ai envoyé des demandes via Postman sans l'en-Origin
tête. Cela m'a sauvé la journée! (Ou au moins ma matinée;))Sur la base de votre commentaire dans la réponse de MindingData, cela n'a rien à voir avec votre CORS, cela fonctionne bien.
L'action de votre contrôleur renvoie les mauvaises données. HttpCode 415 signifie "Type de support non pris en charge". Cela se produit lorsque vous passez le mauvais format au contrôleur (c'est-à-dire XML à un contrôleur qui n'accepte que json) ou lorsque vous retournez un type incorrect (retournez Xml dans un contrôleur qui est déclaré pour ne renvoyer que xml).
Pour plus tard, vérifiez l'existence de l'
[Produces("...")]
attribut sur votre actionla source
Pour moi, cela n'avait rien à voir avec le code que j'utilisais. Pour Azure, nous devions entrer dans les paramètres de l'App Service, dans le menu latéral l'entrée "CORS". Là, j'ai dû ajouter le domaine à partir duquel je demandais des choses. Une fois que j'ai eu ça, tout était magique.
la source
Dans launchSettings.json, sous iisSettings, définissez anonymousAuthentication sur true:
Ensuite, dans Startup.cs, sous ConfigureServices, avant services.AddMvc, ajoutez:
puis, dans la méthode configure, avant app.UseMvc () ajouter:
la source
J'utilise .Net CORE 3.1 et j'ai passé des années à me cogner la tête contre un mur avec celui-ci quand j'ai réalisé que mon code avait commencé à fonctionner mais que mon environnement de débogage était cassé, alors voici 2 conseils si vous essayez de résoudre le problème. problème:
Si vous essayez de consigner les en-têtes de réponse à l'aide du middleware ASP.NET, l'en-tête "Access-Control-Allow-Origin" n'apparaîtra jamais, même s'il y est. Je ne sais pas comment mais il semble être ajouté en dehors du pipeline (à la fin, j'ai dû utiliser WireShark pour le voir).
.NET CORE n'enverra pas "Access-Control-Allow-Origin" dans la réponse à moins que vous n'ayez un en-tête "Origin" dans votre demande. Postman ne le définira pas automatiquement, vous devrez donc l'ajouter vous-même.
la source
Dans mon cas, j'ai corrigé avec UseCors avant UserRouting ..
la source
.NET Core 3.1
A travaillé pour moi et comment les documents disent de le faire:
dans la classe de démarrage:
Dans la méthode ConfigureServices ():
Dans la méthode Configure ():
https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
la source
J'ai obtenu la réponse de MindingData ci-dessus pour fonctionner, mais j'ai dû utiliser Microsoft.AspNet.Cors au lieu de Microsoft.AspNetCore.Cors. J'utilise le projet d'API d'application Web .NetCore dans Visual Studio 2019
la source
le
vous permettra de faire CORS avec des fonctionnalités intégrées, mais il ne gère pas la demande OPTIONS. La meilleure solution de contournement à ce jour est de créer un nouveau middleware, comme suggéré dans un article précédent. Vérifiez la réponse marquée comme correcte dans le post suivant:
Activer l'en-tête OPTIONS pour CORS sur l'API Web .NET Core
la source
Un moyen simple et facile de le faire.
Install-Package Microsoft.AspNetCore.Cors
app.UseCors(options => options.AllowAnyOrigin());
la source
Voici mon code :)
la source
Voici comment j'ai fait cela.
Je vois que dans certaines réponses, ils établissent
app.UserCors("xxxPloicy")
et installent des[EnableCors("xxxPloicy")]
contrôleurs. Vous n'avez pas besoin de faire les deux.Voici les étapes.
Dans Startup.cs à l'intérieur des ConfigureServices, ajoutez le code suivant.
Si vous souhaitez appliquer partout dans le projet, ajoutez le code suivant dans la méthode Configure dans Startup.cs
Ou
Si vous souhaitez l'ajouter aux contrôleurs spécifiques, ajoutez le code d'activation des cors comme indiqué ci-dessous.
Pour plus d'informations: voir ceci
la source
Utilisez un attribut Action / Controller personnalisé pour définir les en-têtes CORS.
Exemple:
Puis sur le contrôleur / action de l'API Web:
la source
Juste pour ajouter une réponse ici, si vous utilisez
app.UseHttpsRedirection()
, et que vous ne frappez pas le port SSL, envisagez de commenter ceci.la source
J'utilisais blazor webassembly comme client et asp.net web api core comme backend et j'avais aussi un problème de cors.
J'ai trouvé une solution avec ce code:
Mon ASP.Net core web api Startup.cs ConfigureServices et Configure les méthodes premières lignes ressemble à ceci:
et ma méthode Configure:
changer
http://example.com
avec votre domaine client ou votre adresse IPla source
la source