同一机器上WordPress无法通过AJAX请求ASP.NET.Core Web应用的问题

我明白学校项目得严格按老师要求来，这种跨服务AJAX请求失败的问题我碰到过不少，咱们一步步来排查常见的坑：

1. 先搞定跨域(CORS)限制 #

哪怕两个服务在同一虚拟机，只要它们的端口/访问地址不一样，浏览器就会触发跨域安全限制，这大概率是最常见的原因。

• 打开你的ASP.NET Core项目，根据版本配置CORS：
  要是用的是.NET 6+，就改Program.cs：

  var builder = WebApplication.CreateBuilder(args);
  // 添加CORS策略，允许WordPress的地址访问
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowWordPressOrigin", policy =>
      {
          // 把这里换成你的WordPress实际地址，比如http://192.168.x.x或者http://localhost
          policy.WithOrigins("http://your-wordpress-full-url")
                .AllowAnyHeader()
                .AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  // 注意这个中间件要放在UseRouting之后，UseAuthorization之前
  app.UseCors("AllowWordPressOrigin");
  
  // 其他配置...
  app.Run("http://0.0.0.0:5000"); // 这里要绑定到0.0.0.0，别只绑localhost！
  

• 要是.NET Core 3.1及更早版本，就改Startup.cs的ConfigureServices和Configure方法，逻辑是一样的。

2. 先确认API本身能访问 #

别着急调AJAX，先手动测试API是否正常：

• 在虚拟机里用curl命令测，比如你的API路由是/api/submit-form，端口5000：

  curl -X POST http://你的虚拟机IP:5000/api/submit-form -d "username=test&email=test@example.com" -H "Content-Type: application/x-www-form-urlencoded"
  

  如果能拿到正常响应，说明API本身没问题；要是返回404，检查控制器上的[Route]和[HttpPost]注解是不是写错了；返回500的话，看API的日志找内部错误。

3. 检查WordPress里的AJAX代码 #

很多时候是请求地址或者参数格式错了：

• 一定要用绝对地址请求API，不能用相对路径（相对路径会默认指向WordPress自己的地址），比如http://192.168.x.x:5000/api/submit-form
• 给你个jQuery AJAX的示例（WordPress默认自带jQuery，直接用就行）：

  jQuery(document).ready(function($) {
      $('#你的表单ID').submit(function(e) {
          e.preventDefault(); // 阻止表单默认提交
          var formData = $(this).serialize(); // 序列化表单数据
  
          $.ajax({
              url: 'http://你的ASP.NET-API完整地址',
              type: 'POST',
              data: formData,
              contentType: 'application/x-www-form-urlencoded', // 和表单提交格式一致
              success: function(res) {
                  console.log('请求成功！', res);
              },
              error: function(xhr, status, err) {
                  // 这里一定要打日志，方便排查！
                  console.log('错误状态:', status);
                  console.log('错误详情:', err);
                  console.log('服务器返回内容:', xhr.responseText);
              }
          });
      });
  });
  

• 打开浏览器开发者工具（F12），切到Network标签，看这个AJAX请求的状态码：
  • 403：十有八九是CORS没配置对
  • 404：API地址/路由写错了
  • 500：API内部报错，去看API的日志

4. 检查虚拟机的防火墙 #

Ubuntu 16.04的ufw防火墙可能挡住了API的端口，比如API用5000端口的话，要开放：

sudo ufw allow 5000/tcp
sudo ufw reload

另外，ASP.NET Core一定要绑定到0.0.0.0，不能只绑localhost，不然虚拟机里的WordPress也访问不到它。

5. 看ASP.NET Core的日志找线索 #

要是前面都排查了还没解决，去看API的运行日志：

• 如果是控制台运行的，直接看控制台输出；
• 要是用systemd托管的服务，用journalctl -u 你的API服务名看日志，里面会有请求进来的记录或者错误堆栈，能帮你定位问题。

内容的提问来源于stack exchange，提问作者Yar Mommy