WordPress 无法在同一台机器上 AJAX 到 ASP.NET.Core Web 应用程序

Question

首先，我知道有更好的方法可以实现这一目标，但这是一个学校项目，所以我别无选择，只能按照我们老师的意愿去做......

我们有一台运行 WordPress 服务器的虚拟机 (Ubuntu 16.04)。该虚拟机还运行 ASP.NET.Core Web 应用程序。

基本上，当有人在我们的 WordPress 网站上填写表格时，我们会通过 AJAX 将用户输入发送到我们的 Web API 上的路由（然后发送带有数据的 RabbitMQ 消息，但这并不重要）。

Web 应用程序控制器：

[Route("api/[controller]")]
public class ValuesController : Controller
{
    [HttpPost("reservation")]
    public int Create([FromBody]MyForm f)
    {
        //Send RabbitMQ messages with form data
    }
}

WordPress 上的 AJAX 代码：

jQuery.ajax({
    dataType: "json",
    method: "post",
    data: jQuery("#myForm").serialize(),
    url: "http://localhost:65443/api/values/reservation",
    succes: function()
    { console.log("Success"); }
});

当我使用 dotnet run 运行 Web 应用程序时，它说它正在侦听 localhost:65443，我可以通过 curl commando 与我的 Web API 完美“交互”。

但在 WordPress 上提交表单会记录此错误： Failed to load resource: net::ERR_CONNECTION_REFUSED。 我不明白，WordPress 与 Web 应用程序在同一台机器上运行，因此向 localhost:65443 发送 AJAX 请求应该可以正常工作，就像 curl 突击队一样 :(

任何帮助将不胜感激！

Answer 1

默认模型绑定器不知道如何将序列化的myForm 表单绑定到MyForm 类。

您能否手动构建 JSON 数据并以 JSON 格式发送？例如

var data = { firstName: txtFirstName.val() };
              ^^^^^^
      Property inside MyForm class


$.ajax({
    type: 'POST',
    url: 'http://localhost:65443/api/values/reservation',
    dataType: 'json',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    success: function(result) {
        console.log(result);
    }
});

Answer 2

在您的 Web API 方法中删除 [FromBody]，因为这将强制 Web API 从请求正文中以 JSON 格式读取 MyForm 类型，并且您正在发布 FormData Content-Type: application/x-www-form-urlencoded; charset=UTF-8

[Route("api/[controller]")]
public class ValuesController : Controller
{
    [HttpPost("reservation")]
    public int Create(MyForm f)
    {
        //Send RabbitMQ messages with form data
    }
}

此外，您需要确保在您的 Web API 项目中配置了 CORS 支持。

要在全局级别配置 CORS 支持，首先，安装 CORS 包

Install-Package Microsoft.AspNetCore.Cors

在startup.cs 的ConfigureServices 方法中添加CORS 服务。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

然后打开根文件夹下的Startup.cs文件，在Configure方法的开头添加下面的配置。

app.UseCors(builder => builder.WithOrigins("http://localhost:5901").AllowAnyMethod());

http://localhost:5901 >> 应该参考您的 WordPress 网站。

然后在startup.cs 的ConfigureServices 方法中添加CORS 服务。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

查看Enable Cross-Origin Requests (CORS) in ASP.NET Core了解更多信息