时间戳

首页 > 解决方案 > WordPress 不能在同一台机器上 AJAX 到 ASP.NET.Core Web 应用程序

asp.net - WordPress 不能在同一台机器上 AJAX 到 ASP.NET.Core Web 应用程序

问题描述

首先，我知道有更好的方法来实现这一点，但这是一个学校项目，所以我别无选择，只能像我们老师想要的那样做......

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

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

网络应用控制器：

[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"); }
});

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

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

任何帮助将不胜感激！

标签： asp.netajaxwordpressubuntuasp.net-web-api

解决方案

在您的 Web API 方法中删除[FromBody]，因为这将强制 Web APIMyForm从请求正文中读取类型为 JSON，并且您正在发布 FormDataContent-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

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

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

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

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

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

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

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

检查在 ASP.NET Core 中启用跨域请求 (CORS) 以获取更多信息

推荐阅读