2

因此，在我的 Angular 前端应用程序中，我有一个表单，在打字稿文件中，我创建了一个新的 formdata 对象并将项目附加到它，如下所示： 

public postFormData() {
    const form = $('#customListForm')[0];
    const formData = new FormData();

    formData.append('tenant', form[0].value);
    formData.append('username', form[1].value);
    formData.append('password', form[2].value);

    formData.append('CL_title', form[3].value);
    formData.append('CL_description', form[4].value);
    formData.append('CL_contentType', form[5].value);
    formData.append('CL_template', form[6].value);

    this.http.post(this.apiURL, formData).catch(this.errorHandler).subscribe(res => this.formPosted(res));
    // this.http.get(this.apiURL).catch(this.errorHandler).subscribe(res => this.formPosted(res));
  }

最后，我的 formData 填写正确。现在，当我尝试将其发布到我的 ASP.NET 4.6.1 Web API 时，它给了我以下错误： 

POST http://localhost:52613/api/customlist 415 (Unsupported Media Type)

在这里你可以看到我的 API 代码： 

// POST api/customlist
    [HttpPost]
    public System.Web.Http.IHttpActionResult Post(CustomList data)
    {
        var test = HttpContext.Current.Request;
        var testje = data;

        return Ok("POST all good");
    }

我假设“CustomList 数据”是错误的？我喜欢的是 formData 绑定到我的模型，我的模型具有与您在此处看到的相同的字段： 

public class CustomList
{
    public string Tenant { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public string CL_title { get; set; }
    public string CL_description { get; set; }
    public string CL_contentType { get; set; }
    public string CL_template { get; set; }
}

在我的标题中，我可以看到以下内容： 

Response Headers: Content-Type: application/json
Request Headers: Content-Type: multipart/form-data

这可能是问题吗？

这是奇怪的部分：我之前也创建了一个 .NET Core 2 Web API，我的发布操作看起来像这样（忽略文件内容）： 

// POST api/input
    [HttpPost]
    public async Task<IActionResult> Post(SPInputObject data)
    {            
        var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
        string filePath = Path.Combine(uploads, data.File.FileName);

        if (System.IO.File.Exists(filePath))
        {
            System.IO.File.Delete(filePath);
        }

        if (data.File.Length > 0)
        {
            using (var fileStream = new FileStream(filePath, FileMode.Create))
            {
                await data.File.CopyToAsync(fileStream);
            }
        }

        ProvisioningService service = new ProvisioningService();
        service.CreateSiteCollection(data.Tenant, data.Title, filePath);

        return Ok("POST all good");
    }

当我将我的 SAME Angular 表单/表单数据发布到此 api 控制器 + 操作时，它将进入 POST .... 那么为什么可以将其发送到我的 .NET Core 2 Web API 而不是我的 ASP.NET 4.6.1 Web应用程序接口？

有谁知道可能是什么问题？

编辑：尝试将内容类型添加到我的前端 Angular 请求不起作用，这是我尝试过的： 

private httpOptions = {
  headers: new Headers({
    'Content-Type': 'application/json'
  })
};

修改我的 http 帖子（我添加了 this.httpOptions）： 

this.http.post(this.apiURL, formData, 
this.httpOptions).catch(this.errorHandler).subscribe(res => 
this.formPosted(res));

然后它在我的 this.httpOptions 上给出以下错误： 

 "message": "Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'.\n  Types of property 'headers' are incompatible.\n    Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated.\n      Property 'keys' is missing in type 'Headers'."
4

2 回答 2

1

你在发帖FormData。大多数浏览器会"multipart/form-data"在您提供FormData. 如果您修改代码以使用 Content-Type "application/json"，那么您还应该将您的请求对象修改为不使用FormData，而是使用 JSON：

public postFormData() {
    const form = $('#customListForm')[0];

    const requestData = {
       tenant: form[0].value,
       username: form[1].value,
       password: form[2].value,
       CL_title: form[3].value,
       CL_description: form[4].value,
       CL_contentType, form[5].value,
       CL_template: form[6].value
    };

    this.http.post(this.apiURL, requestData);
}
于 2018-04-11T15:22:38.453 回答
0

尝试在角度侧或 asp.net 侧将内容类型 application/json 和编码设置为 utf-8，两者都更好。一般是这两个原因造成的。Asp.net core 的模型绑定工作方式略有不同。这是一篇很好的文章

ASP.NET Core 中的模型绑定 JSON POST

于 2018-04-11T13:42:27.950 回答