Réponse au contrôle en amont: "Non" Access-Control-Allowed-Origin "malgré CORS-enabled

Question

Je n'arrive pas à résoudre un problème avec une demande de contrôle en amont 4 angulaire ne passant pas un contrôle d'accès CORS:" Non "Access -Control-Allowed-Origin '". Je suis en mesure d'obtenir des données de la base de données mais je ne peux pas enregistrer/enregistrer des données. J'utilise le code VS pour mon frontal 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 quand la demande est faite, je deviens une erreur de:

XMLHttpRequest ne peut pas charger http://localhost:54429/api/createEmployee/. La réponse à la demande de contrôle en amont ne passe pas contrôle d'accès contrôle: Non L'en-tête 'Access-Control-Allow-Origin' est présent sur la ressource demandée. Origine 'http://localhost:4200' est donc pas permis accès

Dans mon vs code, 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 le retrait du corps et les options du poste .

Je ne sais pas ce que je suis absent.

config 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=&quot;data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" 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=&quot;data source=(localdb)\MSSQLLocalDB;initial catalog=northwind;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" 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=&quot;data source=(localdb)\MSSQLLocalDB;initial catalog=Sample;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" 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=\&quot;Web\&quot; /optionInfer+" /> 
    </compilers> 
    </system.codedom> 
</configuration> 

Answer 1

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, ajouter ou remplacer 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à que le contenu exact en place, essayez de le retirer, l'exécution du serveur, l'arrêt du serveur, puis en ajoutant le contenu et puis réexécutez le serveur. Je sais que cela semble étrange, mais je pense que c'est ce qui a fini par le régler pour moi. Bonne chance.

MISE À JOUR # 1

Maintenant que nous avons quelque chose qui se passe du côté du serveur de choses, essayez de supprimer l'en-tête Content-Type et JSON.stringify choses dans votre code angulaire. i.e. .:

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 être PRÉPONDÉRANTS certains des changements que nous avons fait. 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 vous suffit de le renommer et de suivre le même processus.

MISE À JOUR # 3

J'ai réussi à obtenir votre exemple projet en cours. Il démontre un problème avec CORS, mais cela a été résolu en utilisant ma première suggestion 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 } 
     ); 
    } 
} 

Answer 2

Le problème semble être du côté du serveur.

Avant tout non-simple CORS request, le navigateur envoie une demande de contrôle en amont OPTIONS pour s'assurer que ce serveur autorise des demandes CORS non simples. (Les requêtes POST avec application/json ne sont pas considérées comme simples)

Dans votre cas, comme l'erreur l'indique, uniquement si la réponse à la requête OPTIONS de contrôle en amont contient l'en-tête access-control-allow-origin avec la valeur 'http://localhost:4200' votre demande POST originale sera envoyée. (La réponse dans votre capture d'écran ne contient pas cet en-tête)

Vous n'avez pas beaucoup écrit sur l'implémentation de votre serveur, mais si vous utilisez asp.net-web-api voici une solution simple (un peu hacky) sur la façon de le faire répondre à ces demandes OPTIONS de contrôle en amont - link (Also see the comment there by Marcus Cunningham)

Answer 3

cela est sur la configuration côté serveur. Pour vos tests de développement, vous pouvez utiliser Google Chrome et son plugin.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

espoir cela utile.