Question

如何将对象列表从Angular传递给Web API？

我尝试使用content-type作为application / json，但它显示了CORS预检错误。

以下是Web API Post方法：

 [HttpPost]
  public bool getDetails(List<Subnets> data)
  {
      //Logic here
  }

以下是角度代码：

 $scope.save = function (jsondata) {

    $http({
        method: "POST",
        url: "http://localhost:60262/api/IPUpload/getDetails",
        data: jsondata,
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function (data) {
        alert('success');
        if (data.status) {
            $scope.msg = "Data has been inserted ! ";
        }
        else {
            $scope.msg = "Error : Something Wrong";
        }
    }, function (error) {
        alert('fail');
        $scope.msg = "Error : Something Wrong";
    })

}

以下是子网类：

 public class Subnets
{
    public string ID { get; set; }
    public string Subnet { get; set; }
    public string IPAddress { get; set; }
    public string ServerName { get; set; }
    public string Mac { get; set; }
    public string Vmware { get; set; }
    public string Usage { get; set; }
    public string Owner { get; set; }
    public DateTime ExpiryDate { get; set; }
    public string Email { get; set; }
    public string SwitchIP { get; set; }
    public string SwitchPort { get; set; }
    public string PortVLAN { get; set; }
    public string Zone { get; set; }
    public string Justification { get; set; }
    public string CustomerID { get; set; }
    public string Remarks { get; set; }
}

我尝试将内容类型用作'application / x-www-form-urlencoded;字符集= UTF-8' 。它调用API操作方法，但参数“data”为空。内容类型为'application / json'，它显示CORS预检错误。

阻止跨源请求：同源策略禁止读取远程资源在 http://localhost:60262/api/StaticIPUpload/getDetails。（原因：CORS 标题'Access-Control-Allow-Origin'与'（null）'不匹配。

提前致谢。

解决方案：

我在global.asax中添加了以下代码，它起作用了：

 protected void Application_BeginRequest()
    {
        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
        {
            Response.Flush();
        }
    }

Answer 1

CORS不允许 application / json 。你没关系text / plain

您现在甚至可以避开标题部分。如你所说它调用API动作方法但数据为空。可能jsondata不是一个有效的对象。

尝试使用以下代码。

 $http({
        method: "POST",
        url: "http://localhost:60262/api/IPUpload/getDetails",
        data: JSON.stringify(jsondata)        
    }).then(function (data) {

public bool getDetails(List<Subnets> data)
{
}

没有[HttpPost]。

我还想看看你的子网类和jsondata

Answer 2

如果我没记错的话，Angular.js会在您使用application/json时触发预检请求。您的网络API需要以200响应响应预检请求。

如果您要编写自己的API，请确保OPTION端点上的Web API中已启用http://localhost:60262/api/IPUpload/getDetails。

启用OPTION HTTP方法并返回200 Angular应按预期工作。

Answer 3

您需要在Web API前端启用CORS。默认情况下，angularjs支持跨域ajax调用。但如果服务器不允许跨域调用，它将失败。

您可以按如下方式启用CORS：

在服务器端启用选项调用。
对于每个实际的帖子结束点，你也需要一个选项终点，这样当浏览器检查CORS并发送一个选项调用时，它应该返回200。
跨域ajax调用也支持application \ json。

将对象列表从Angular传递到Web API

3 个答案: