Why is CORS blocking every request coming from frontend? I've made an attempt at allowing it, but maybe I'm writing something incorrectly in my code. Are there any packages that I'm missing or i haven't added some namespace?
I'm getting this error message:
This is my Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Newtonsoft.Json.Serialization;
using Microsoft.Extensions.FileProviders;
using System.IO;
namespace webApi
{
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)
{
//Enable CORS
services.AddCors(c =>
{
c.AddDefaultPolicy(builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
services.AddCors(c =>
{
c.AddPolicy("allowcors" ,builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
//JSON Serializer
_ = services.AddControllersWithViews().AddNewtonsoftJson(options =>
options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore)
.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver
= new DefaultContractResolver());
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)
{
//Enable CORS
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseCors("allowcors");
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}
}
This is my controller
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Data;
using System.Data.SqlClient;
using Microsoft.Extensions.Configuration;
using webApi.Models;
using Microsoft.AspNetCore.Hosting;
using System.IO;
using Microsoft.AspNetCore.Cors;
namespace webApi.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ContactController : ControllerBase
{
private readonly IConfiguration _configuration;
private readonly IWebHostEnvironment _env;
public ContactController(IConfiguration configuration, IWebHostEnvironment env, IApplicationBuilder app)
{
_configuration = configuration;
_env = env;
app.UseCors();
}
[EnableCors]
[HttpPost]
public JsonResult Post(Contact con)
{
string query = @"
insert into dbo.Contact(ContactName,ContactEmail,ContactSubject,ContactMessage,ContactDate)
values (@ContactName,@ContactEmail,@ContactSubject,@ContactMessage,@ContactDate)
";
DataTable table = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("ContactAppCon");
SqlDataReader myReader;
using (SqlConnection myCon = new SqlConnection(sqlDataSource))
{
myCon.Open();
using (SqlCommand myCommand = new SqlCommand(query, myCon))
{
myCommand.Parameters.AddWithValue("@ContactName", con.ContactName);
myCommand.Parameters.AddWithValue("@ContactEmail", con.ContactEmail);
myCommand.Parameters.AddWithValue("@ContactSubject", con.ContactSubject);
myCommand.Parameters.AddWithValue("@ContactMessage", con.ContactMessage);
myCommand.Parameters.AddWithValue("@ContactDate", DateTime.Now);
myReader = myCommand.ExecuteReader();
table.Load(myReader);
myReader.Close();
myCon.Close();
}
}
return new JsonResult("Added Successfully");
}
}
}
If it makes any difference, I'm using axios js to send XMLHttpRequest.
This is my function to post data that is getting blocked by CORS
function postData(event) {
event.preventDefault();
axios.post('http://localhost:5291/api/Contact', {
"ContactName": document.getElementById("ContactName").value,
"ContactEmail": document.getElementById("ContactEmail").value,
"ContactSubject": document.getElementById("ContactSubject").value,
"ContactMessage": document.getElementById("ContactMessage").value,
"ContactDate" : "Date.now"
});
swal("Message sent successfully!").then(()=>{
window.location.reload();
});
}
Data comes from this form
<form class="riyaqas-form-wrap mt-5 mt-lg-0" onsubmit="postData(event);return false;">
<div class="row custom-gutters-16">
<div class="col-md-6">
<div class="single-input-wrap">
<input id="ContactName" name="name" type="text" class="single-input" minlength="2" required>
<label>Name</label>
</div>
</div>
<div class="col-md-6">
<div class="single-input-wrap">
<input id="ContactEmail" name="email" type="email" class="single-input" required>
<label>E-mail</label>
</div>
</div>
<div class="col-md-12">
<div class="single-input-wrap">
<input id="ContactSubject" name="subject" type="text" class="single-input" required>
<label>Subject</label>
</div>
</div>
<div class="col-md-12">
<div class="single-input-wrap">
<textarea id="ContactMessage" name="message" class="single-input textarea" cols="20" required></textarea>
<label class="single-input-label">Message</label>
</div>
</div>
<div class="col-12">
<input type="submit" class="btn btn-red mt-0" value="Send" onsubmit="postData(event)">
</div>
</div>
</form>