无法使用来自 html5 的 Jquery 将数据发布到 WebApi

Question

我在 html 页面中使用 Jquery ajax 将数据发布到 WebaPi 控制器时遇到问题。当我通过 fiddler 进行测试时，它已连接并且工作正常，但是当我尝试使用 Ajax 时它只给出错误..

这是我的示例代码..

var bookData = {
                "CurrentCompany": "BizSight Sample Product Company",
                "CompanyName": CompanyName,
                "LegalName": "Biztech",
                "Address1": Address1,
                "Address2": Address2,
                "City": City,
                "State": State,
                "Phone": Phone,
                "ZipCode": ZipCode,
                "Fax": Fax,
                "Email": Email,
                "Website": Website,
                "CountryID": 1,
                "federalTaxID": 1,
                "CurrentUser": CurrentUser,
                "BusinessType": BusinessType,
                "CurrentFiscalYear": Jsondate
            };
            $.ajax({
                type: "POST",
                cache: false,
                url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/Create/",
                data: JSON.stringify(bookData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                        var result = JSON.stringify(data);
                    $("#loading").show();
                    alert("success..." + result);
                },
                error: function (xhr) {
                    $("#loading").show();
                    alert("Test3:" + xhr.statusText);
                }
            });

当我从 html 发布数据并检查提琴手时，它会给出如下图所示的消息

我在这段代码中遗漏了什么..？提琴手它自己在工作，但 frmo html 页面不工作..你能帮我解决和实现这个

我的 Api 类 `

public class CreateController : ApiController
{
    public static string CompanyName = " ";
    public static string con;
    public static string sqlConnection;
    public static string DatabaseName;
    string TrustedConnection = "Yes";
    string DBServer = " ";
    string FilePath = null;
    string testFirstline = " ";
    //clsLog objLog = new clsLog();
    bool isSuccess = false;




    public string Post(DatabaseCls cls)
    {
        string ReturnMessage = "Success";

        // ReturnMessage = "Hello  " + id + "_" + parameter1 + "_" + parameter2 + "_" + parameter3 + "_" + parameter4 + "_" + parameter5 + "_" + parameter6 + "_" + parameter7 + "_" + parameter8 + "_" + parameter9 + "_" + parameter10 + "_" + parameter11 + "_" + parameter12 + "_" + parameter13 + "_" + parameter14 + "_" + parameter15;
      return ReturnMessage;
    }}

谢谢 维克多.A

Answer 1

您看到的 OPTIONS 错误是由 CORS 引起的。您需要将其添加到 Startup.cs 中的 WebAPI 以允许跨站点请求。

public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);

    var formatters = configuration.Formatters;

    //-- Disable XML support
    formatters.XmlFormatter.SupportedMediaTypes.Clear();

    var jsonFormatter = formatters.JsonFormatter;
    jsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json-patch+json"));
    jsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
    jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    jsonFormatter.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
    jsonFormatter.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
}

（编辑，建议）

[RoutePrefix("api")]
public class CreateController : ApiController
{
    [HttpPost, Route("create")]
    public IHttpActionResult Post([FromBody]DatabaseCls cls)
    {
        try
        {
             return Ok(new { success = true });
        }
        catch
        {
             return InternalServerError();
        }
    }
}

$.ajax({
  type: "POST",
  cache: false,
  url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/api/Create", //note the additional "api" in url
  data: JSON.stringify(bookData),
  dataType: "json",
  success: function (data, status, jqXHR) {
       var result = JSON.stringify(data);
       $("#loading").show();
       alert("success..." + result);
   },
   error: function (xhr) {
       $("#loading").show();
       alert("Test3:" + xhr.statusText);
   }
});