Réponse au contrôle en amont: "Non 'Accès-Contrôle-Autorisé-Origine'" malgré CORS activé
Je ne parviens pas à résoudre un problème avec une requête de contrôle en amont angulaire 4 ne réussissant pas le contrôle de contrôle d'accès CORS: «Non,« origine-contrôle d'accès autorisé ». Je parviens à obtenir des données de la base de données mais je ne parviens pas à publier/enregistrer des données. J'utilise du code VS pour mon front-end pour accéder à mon back-end Visual Studio 2015. Mon contrôleur Web Api a un attribut de:
[EnableCors(origins: "*", headers: "*", methods: "*")]
[HttpPost]
public async Task<IHttpActionResult> Post([FromBody]Employee employee)
{
_repo.Create(employee);
return Ok();
}
… Mais lorsque la demande est faite, j'obtiens une erreur de:
XMLHttpRequest ne peut pas charger http: // localhost: 54429/api/createEmployee/ . La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 4200 ' n'est donc pas autorisé à accéder
Dans mon code vs, mon service ressemble à ceci:
postEmployeeForm(employee: Employee): Observable<any>{
let body = JSON.stringify(employee);
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
console.log('posting employee ' , employee);
return this.http.post("http://localhost:54429/api/employees/", body, options)
.map(this.extractData)
.catch(this.handleError)
}
405 Réponse après la suppression du corps et des options de la publication.
Pas sûr de ce que je manque.
configuration web
<configuration>
<configSections>
<!-- For more information on Entity Framework configuration, visit http://go.Microsoft.com/fwlink/?LinkID=237468 -->
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-TBryant.WebAPI-20170303082842.mdf;Initial Catalog=aspnet-TBryant.WebAPI-20170303082842;Integrated Security=True" providerName="System.Data.SqlClient" />
<!--<add name="SampleEntities" connectionString="metadata=res://*/MyModels.csdl|res://*/MyModels.ssdl|res://*/MyModels.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />-->
<add name="northwindEntities" connectionString="metadata=res://*/NorthwindModel.csdl|res://*/NorthwindModel.ssdl|res://*/NorthwindModel.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=northwind;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
<add name="SampleEntities1" connectionString="metadata=res://*/EmployeeDataModel.csdl|res://*/EmployeeDataModel.ssdl|res://*/EmployeeDataModel.msl;provider=System.Data.SqlClient;provider connection string="data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
<appSettings></appSettings>
<system.web>
<authentication mode="None" />
<compilation debug="true" targetFramework="4.6.1" />
<httpRuntime targetFramework="4.6.1" />
</system.web>
<system.webServer>
<!--<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELTE,OPTIONS"/>
</customHeaders>
</httpProtocol>-->
<modules>
<remove name="FormsAuthentication" />
</modules>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
<runtime>
<assemblyBinding xmlns="urn:schemas-Microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security.OAuth" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security.Cookies" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed" />
<bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Cors" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
</dependentAssembly>
</assemblyBinding>
</runtime>
<entityFramework>
<defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
<providers>
<provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
</providers>
</entityFramework>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701" />
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\"Web\" /optionInfer+" />
</compilers>
</system.codedom>
</configuration>
J'ai réussi à reproduire votre problème. La solution qui a fonctionné pour moi est de remplacer une partie de Web.config. Sous system.webServer, ajoutez ou remplacez le bloc <handlers> existant par ce qui suit:
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
Si vous avez déjà ce contenu exact en place, essayez de le supprimer, d'exécuter le serveur, d'arrêter le serveur, d'ajouter de nouveau le contenu, puis de relancer le serveur. Je sais que cela semble étrange, mais je pense que c'est ce qui a finalement été résolu pour moi. Bonne chance.
MISE À JOUR # 1
Maintenant que quelque chose se passe côté serveur, essayez de supprimer les en-têtes Content-Type et JSON.stringify de votre code Angular. c'est à dire.:
postEmployeeForm(employee: Employee): Observable<any>{
console.log('posting employee ' , employee);
return this.http.post("http://localhost:54429/api/employees/", employee)
.map(this.extractData)
.catch(this.handleError)
}
MISE À JOUR # 2
Je pense que votre configuration IIS Express peut annuler certaines des modifications que nous avons apportées. Fermez Visual Studio, supprimez le dossier .vs/config à la racine de la solution dans l'Explorateur Windows, puis essayez de réexécuter le projet. Cela devrait réinitialiser vos paramètres IIS Express. Si vous n'êtes pas complètement à l'aise avec la suppression du dossier, il suffit de le renommer et de suivre le même processus.
MISE À JOUR # 3
J'ai réussi à obtenir votre exemple de projet en cours d'exécution. Cela montre un problème avec CORS, mais cela a été corrigé en utilisant ma suggestion initiale d'ajouter config.EnableCors:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.EnableCors();
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
Le problème semble être du côté du serveur.
Avant toute requête CORS non-simple , le navigateur envoie une demande de contrôle en amont OPTIONS afin de s’assurer que ce serveur autorise les demandes CORS non simples. (Les requêtes POST avec application/json ne sont pas considérées comme simples)
Dans votre cas, comme l’implique l’erreur, uniquement si la réponse à la requête OPTIONS preflight contient l’en-tête access-control-allow-Origin avec la valeur ' http: // localhost: 4200 ' votre original POST demande sera envoyée. (La réponse dans votre capture d'écran ne contient pas cet en-tête)
Vous n’avez pas écrit beaucoup sur l’implémentation de votre serveur, mais si vous utilisez asp.net-web-api, voici une solution simple (un peu compliquée) sur la manière de le faire répondre à ces requêtes OPTIONS de contrôle en amont - link Marcus Cunningham)
il s’agit de la configuration côté serveur. Pour vos tests de développement, vous pouvez utiliser Google Chrome et son plugin.
j'espère que cela vous aidera.