2017-05-11 1 views
5

Je suis en train de me battre pour faire une requête POST avec CORS.Comment activer les demandes d'origine croisée dans ASP.NET MVC 4 sur POST à ​​l'aide d'Angular 2

J'ai en fait une classe qui ajoutent en-tête de réponse correcte sur mes méthodes dans mon contrôleur

using System; 
using System.Web.Mvc; 

public class AllowCrossSiteAttribute : ActionFilterAttribute 
{ 
    public override void OnActionExecuting(ActionExecutingContext filterContext) 
    { 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "*"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

     base.OnActionExecuting(filterContext); 
    } 
} 

et je l'utilise comme celui-ci

[AllowCrossSite] 
public ActionResult GetReportParameters(string IdRapport) 

et j'obtenir le résultat attendu enter image description here

Mais le problème est lorsque j'essaie de faire une demande POST avec un en-tête personnalisé pour passer ce type de contenu spécifique

'Content-Type': 'application/json; charset=utf-8' 

Je reçois effectivement cette réponse têtes

enter image description here

Il est donc que rien ne se fait sur l'en-tête même si je vais bien dans ma classe d'attribut.

Voici mon côté avant dans angulaire 2 Service

const headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' }); 
const options = new RequestOptions({ headers: headers , withCredentials: true }); 

const mock = { 
    name: 'TitreRegroupement1', 
    visible: false, 
    type: 'System.String', 
    value: 'Test' 
}; 

// tslint:disable-next-line:max-line-length 
const body = JSON.stringify({ idRapport: '00392024-d171-4f39-9c5c-97a51f53fd54', filtre: '', exportFormat: '', parameters: data }); 

return this.http.post('http://localhost:8080/ReportingViewer/ExportReport', body, options) 
    .map((response: Response) => { 
     return this.extractSingleData(response, Parameters); 
    }) 
    .catch(this.handleError); 
} 

En utilisant postman il n'y a pas de problème de déclarer, à juste titre le Voyage toute chose, je peux accéder à mes paramètres de la méthode à l'intérieur du contrôleur sans problème.

Si un corps peut me donner quelques conseils pour comprendre je suis heureux de les entendre! :)

Répondre

2

Merci pour vous deux, j'ai finalement trouvé comment le faire fonctionner.

D'abord je demande ce qui m'a proposé sideshowbarker

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

et je manque quelque chose dans mes en-têtes, je faisais « * » tout le chemin, mais enfin, avec ces paramètres, il a travaillé

filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

pour ceux qui sont interessés par la forme finale de ma classe ici c'est

using System; 
using System.Web; 
using System.Web.Mvc; 

namespace Via.Client.WebMvc 
{ 
    public class AllowCrossSiteAttribute : System.Web.Mvc.ActionFilterAttribute 
    { 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      HttpContext ctx = System.Web.HttpContext.Current; 

      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

      if (filterContext.HttpContext.Request.HttpMethod == "OPTIONS") 
      { 
       filterContext.HttpContext.Response.Flush(); 
      } 

      base.OnActionExecuting(filterContext); 
     } 
    } 
} 
3

Votre frontend code JavaScript déclenche votre navigateur pour faire une demande de contrôle en amont CORS OPTIONS.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Vous devez modifier le code côté serveur pour gérer cette demande OPTIONS, en ajoutant, par exemple:

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

Ou voir https://stackoverflow.com/search?q=%5Basp.net-mvc%5D+%5Bcors%5D+options pour beaucoup d'autres réponses connexes.