如何使用ajax直接调用控制器答案

【问题标题】：How to call a controller directly using ajax如何使用ajax直接调用控制器
【发布时间】：2021-01-11 15:21:54
【问题描述】：

假设我有 2 个项目 ClientSide 和 ServerSide。我需要从 ClientSide 调用 ServerSide 控制器中的一个函数。可以直接使用Ajax来完成吗？这是我的 Ajax 代码（如果控制器放在同一个项目中，它将起作用）：

var url = 'api/values/insert';
$.ajax({
    type: method,
    url: url,
    data: JSON.stringify(data),
    contentType: 'application/json',
    success: function (data) {
        window.location.href = "/index";
    }
 });

我的 ClientSide 的本地主机是 https://localhost:44356，我的 ServerSide 的本地主机是 https://localhost:44329。我已经尝试将本地主机添加到 url，但它仍然无法正常工作。

var url = 'https://localhost:44329/api/values/insert';

有没有其他方法可以帮助我解决这个问题？我很感激所有的建议和答案。如果需要，有关更具体的信息，我使用的是 .NET 2.1

更新：这是我在 ServerSide 中的控制器代码。如果我把控制器放在ClientSide，它不需要任何修改就可以工作，所以我认为问题出在Ajax和控制器之间的连接上。

namespace RazorAPI.Controllers
{
    [Produces("application/json")]
    [Route("api/[controller]")]
public class ValuesController : Controller
{
    private readonly IDataService _dataService;
    public ValuesController(IDataService dataService)
    {
        _dataService = dataService;
    }
    // POST: api/values/insert
    [HttpPost]
    [Route("[action]")]
    public void Insert([FromBody]Data data)
    {
         //This call another function in ServerSide
        _dataService.Create(data); 
    } 
}

【问题讨论】：

你能告诉我们你的服务器端控制器方法的结构吗？
你说«它仍然不工作»是什么意思。您是否收到任何错误消息？当然你可以使用 Ajax 请求调用任何控制器的 action 方法，因为任何 Ajax 请求都只是 HTTP 请求。
我在运行 post 方法时收到状态“(failed) net::ERR_FAILED”。如果我将控制器放在同一个项目（ClientSide）中，它可以正常工作并且连接到ServerSide中的其他代码没有问题，所以我认为问题在于Ajax请求和控制器之间的连接。

标签： json .net ajax controller

【解决方案1】：

解决后，我发现问题是由于 CORS 问题。我就是这样解决的。

在ServerSide项目的Startup.cs文件中，在Configure方法中添加如下代码：

app.UseCors("AllowAllHeaders");

在 ConfigureService 方法中添加如下代码：

services.AddCors(options =>
{
    options.AddPolicy("AllowAllHeaders",
          builder =>
          {
              builder.AllowAnyOrigin()
                     .AllowAnyHeader()
                     .AllowAnyMethod();
           });
});

现在使用 url 包括本地主机到服务器端：

var url = 'https://localhost:44329/api/values/insert';

这对我有用，但它允许来自任何域的访问。如果您需要它只被特定来源访问，请将配置中的代码更改为：

app.UseCors("AllowSpecificOrigin");

对于 ConfigureService 中的代码：

services.AddCors(options => 
{ 
    options.AddPolicy("AllowSpecificOrigin", 
          builder => 
          { 
              builder.WithOrigins("localhost") 
                     .AllowAnyOrigin() 
                     .AllowAnyHeader() 
                     .AllowAnyMethod(); 
          }); 
});

感谢大家的帮助！

【讨论】：