我正在尝试使用 CORS 发出 POST 请求。

我有一个类在我的 Controller 中的方法上添加了正确的响应 header

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)

我得到了预期的结果

但问题是当我尝试使用自定义 header 发出 POST 请求以传递此特定内容类型时

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

我实际上得到了这些响应头

所以即使我正确地进入我的属性类，也好像没有对 header 做任何事情。

这是我在 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 声明没有问题，整个过程正确，我可以毫无问题地从 Controller 内部的方法访问我的参数。

最佳答案

我找到了让它工作的方法。首先，我应用了对我的建议 sideshowbarker

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

我的标题中遗漏了一些东西，我一直在做“*”，但最终使用这些参数它起作用了

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

对于那些对我类(class)的最终形式感兴趣的人，这里是

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);
        }
    }
}

关于javascript - 如何使用 Angular 2 在 POST 上启用 ASP.NET MVC 4 中的跨源请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43912655/