如何使用Angular 2在POST上的ASP.NET MVC 4中启用跨源请求 [英] How to enable cross origin requests in ASP.NET MVC 4 on POST using Angular 2
问题描述
我正在尝试使用CORS发出POST请求.
I'm trying to make a POST request with CORS.
我有一个类,可以在控制器内部的方法上添加正确的响应标头
I've a class that adds the correct response header on my methods inside my controller
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);
}
}
我这样使用
[AllowCrossSite]
public ActionResult GetReportParameters(string IdRapport)
,我得到了预期的结果
and I get the expected result
但是问题是,当我尝试通过自定义标头发出POST请求以传递此特定内容类型
'Content-Type': 'application/json; charset=utf-8'
我实际上正在获得这些Response标头
I'm actually getting these Response headers
因此,即使我正确进入了属性类,也好像没有对标题进行任何操作.
So it's like nothing is done about the header even if I'm correctly going in my attribute class.
这是我在Angular 2服务中的一面
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);
}
通过使用postman可以毫无问题地进行声明,整个过程都可以正常进行,我可以从控制器内部的方法访问我的参数而没有问题.
By using postman there is no problem to declare, the whole thing travel correctly I can access my parameters from the method inside the controller with no problem.
推荐答案
我找到了使其工作的方法.首先,我应用我的建议 sideshowbarker
I found how to make it work. First I apply what proposed me sideshowbarker
if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) &&
Request.HttpMethod == "OPTIONS") {
Response.Flush();
}
我在标头中丢失了一些内容,我一直都在做"*",但最终这些参数都起作用了
and I was missing something in my Headers, I was doing "*" all the way but finally with these parameters it worked
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
对于那些对我课程的最终形式感兴趣的人是
for those who are interested in the final form of my class here it is
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)
{
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);
}
}
}
这篇关于如何使用Angular 2在POST上的ASP.NET MVC 4中启用跨源请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!