[教程]C# 接受JS POST参数：揭秘跨域数据传递之道

引言在Web开发中，跨域数据传递是一个常见且复杂的问题。当JavaScript需要与不同源的C后端进行交互时，跨域资源共享（CORS）策略限制了直接的通信。本文将探讨如何使用C创建一个能够接受来自Ja...

引言

在Web开发中，跨域数据传递是一个常见且复杂的问题。当JavaScript需要与不同源的C#后端进行交互时，跨域资源共享（CORS）策略限制了直接的通信。本文将探讨如何使用C#创建一个能够接受来自JavaScript POST请求的数据的服务器，并解决跨域资源共享的问题。

环境准备

• 开发环境：Visual Studio 2019 或更高版本
• .NET版本：.NET Core 3.1 或更高版本
• 项目类型：ASP.NET Core Web API

步骤一：创建ASP.NET Core Web API项目

1. 打开Visual Studio，创建一个新的ASP.NET Core Web API项目。
2. 选择“Web API”模板，并选择“ASP.NET Core 3.1”作为框架版本。
3. 完成项目创建。

步骤二：创建控制器

1. 在项目中添加一个新的控制器，例如命名为ApiController.cs。
2. 在控制器中，添加一个POST操作方法，用于接收JavaScript发送的POST请求。

using Microsoft.AspNetCore.Mvc;
[Route("api/[controller]")]
[ApiController]
public class ApiController : ControllerBase
{ [HttpPost("receivePost")] public IActionResult ReceivePost([FromBody] string data) { // 处理接收到的数据 // 这里仅简单地返回接收到的数据 return Ok(data); }
}

步骤三：配置CORS策略

1. 在Startup.cs文件中，配置CORS策略。
2. 添加AddCors方法到ConfigureServices方法中。

public void ConfigureServices(IServiceCollection services)
{ services.AddControllers(); // 配置CORS策略 services.AddCors(options => { options.AddPolicy("AllowSpecificOrigins", builder => { builder.WithOrigins("http://example.com", "https://example.com") .AllowAnyHeader() .AllowAnyMethod(); }); });
}

1. 在Configure方法中，应用CORS策略。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{ if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseRouting(); // 应用CORS策略 app.UseCors("AllowSpecificOrigins"); app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
}

步骤四：使用JavaScript发送POST请求

1. 在前端页面中，使用fetch API发送POST请求。

fetch('http://localhost:5000/api/apiController/receivePost', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

总结

通过以上步骤，我们成功创建了一个C# ASP.NET Core Web API项目，能够接受来自JavaScript的POST请求，并解决跨域资源共享问题。在实际应用中，可以根据具体需求调整CORS策略，并处理接收到的数据。