I created 2 projects: Client and Server.
Client is a Razor web app that contains javascript on the index page for calling the api. It is hosted under http://localhost:8000.
Index.cshtml
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<button id="sender-get">GET</button>
<div id="content-get"></div>
</div>
<div class="col-6">
<button id="sender-post">POST</button>
<div id="content-post"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha256-oKpAiD7qu3bXrWRVxnXLV1h7FlNV+p5YJBIr8LOCFYw=" crossorigin="anonymous"></script>
<script>
$(document).ready(() => {
$('#sender-get').click(() => {
$.get("http://localhost:9000/weatherforecast")
.done(() => {
$('#content-get').text('done');
})
.fail(() => {
$('#content-get').text('fail');
});
});
$('#sender-post').click(() => {
$.post("http://localhost:9000/weatherforecast")
.done(() => {
$('#content-post').text('done');
})
.fail(() => {
$('#content-post').text('fail');
});
});
});
</script>
Server is an ASPNET Core (3.1) Web Api with the weatherforecast template. It is hosted under http://localhost:9000. It uses the CORS middleware and is configured to accept request with origin http://localhost:5000.
WeatherForecastController.cs
namespace Server.Controllers
{
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
private readonly ILogger<WeatherForecastController> _logger;
public WeatherForecastController(ILogger<WeatherForecastController> logger)
{
_logger = logger;
}
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
var rng = new Random();
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
})
.ToArray();
}
[HttpPost]
public IEnumerable<WeatherForecast> Post()
{
return null;
}
}
}
Startup.cs
namespace Server
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddDefaultPolicy(policy =>
{
policy.WithOrigins("http://localhost:5000");
});
});
services.AddControllers();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}
}
As I click on POST, the request fails, which is a correct response:
But if you put a breakpoint on the api controller, it still hits the Post() method:
