【问题标题】:Posting json data using Angular JS $http.post() to WCF REST fails in Chrome but success in IE使用 Angular JS $http.post() 将 json 数据发布到 WCF REST 在 Chrome 中失败,但在 IE 中成功
【发布时间】:2015-11-18 07:27:23
【问题描述】:

1- 在应用程序中添加了所有标题设置 _Start() WCF 项目的 global.asax 文件的事件。 http://www.codeproject.com/Articles/845474/Enabling-CORS-in-WCF

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST,PUT,DELETE");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, x-requested-with");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        } 
    }

2- 在 WebApiConfig 文件中启用 cors http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();

    }
}

3- 要为单个操作启用 CORS,请在控制器的操作方法上修饰 [EnableCors] 属性。

public class VideoController : ApiController
{
[Route("PostComment")]
[HttpPost]
[EnableCors(origins: "*", headers: "*", methods: "POST")]
public HttpResponseMessage PostComment([FromBody] DTOUserComment comment)
    {
        HttpResponseMessage response = null;
        try
        {
            IVideoDetails vdo = BaseServices.videoDetails();
            vdo.UpdateComments(comment);
            response = Request.CreateResponse(HttpStatusCode.OK, "Success");
        }
        catch (UnauthorizedAccessException ex)
        {
            response = Request.CreateErrorResponse(HttpStatusCode.Unauthorized, ex.Message);
        }
        catch (Exception ex)
        {
            response = Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
        }
        return response;
    }

}

4- 从 Angular js $http.post() 发布数据

$scope.publishComment = function () {
        var myJSONData ={"UserName":"Asif"};
        var req = {
            method: "POST",
            url: "http://localhost:55590/api/BaseAPI/postcomment",
            data: myJSONData              
        };
        $http(req).then(function(response){
        alert("success");
},function(reason){
alert("error"); 
});

在添加 CORS 之前,webapi 响应代码是 Chrome 浏览器中的“405 Method not Found”错误:

在 WebAPi 中添加 CORS 后,响应状态码为“200 OK”,但 Request Header 仍显示“OPTION”但未显示“POST”且数据发布失败:

非常感谢任何帮助。谢谢。

【问题讨论】:

标签: javascript angularjs wcf asp.net-web-api


【解决方案1】:

我好像通过修改头信息修改Global.asax.cs解决了这个问题:

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            //These headers are handling the "pre-flight" OPTIONS call sent by the browser
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Api-Version");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

此外,我的角度代码如下所示:

        $http.defaults.useXDomain = true;
        delete $http.defaults.headers.common['X-Requested-With'];

        var req = {
            url: BASEURL + 'Login',
            method: "POST",
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            data: {
                userName: username, password: password, isPersistent: true
            }
        }

        $http(req)
            .success(function (response) {
                console.log(response);
                callback(response);
        });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-02-10
    • 2011-02-27
    • 1970-01-01
    • 2017-10-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多