SAPUI5 - AJAX CORS Issue - ajax

Question

I know this is a topic that occures a lot. I have searched the Internet but I could not find a solution for my problem yet:
I am developing an SAPUI5 Fiori app in the SAP Web IDE. The App will be deployed on an internal server within our company network. So the app will only work inside the company network.
Now I have simple ASP.NET Core Web API that is running on a separate server also inside the company network.
When i deploy the app and try to consume the web api via AJAX request, i become the following error:
Access to XMLHttpRequest at 'http://myserver:5000/api/test' from
origin 'https://sap.mycompany.com:44315' has been blocked by CORS
policy: Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the
requested resource.
My Code on the Web API:
Startup.cs:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(
"AllowOrigin",
builder => builder.WithOrigins("https://sap.mycompany.com:44315")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
});
services.AddAuthentication(IISDefaults.AuthenticationScheme);
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.Configure<MvcOptions>(options => options.Filters.Add(new CorsAuthorizationFilterFactory("AllowOrigin")));
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseCors("AllowOrigin");
app.UseMvc();
}
Controller:
// POST: api/test
[HttpPost]
public async Task<IActionResult> test([FromBody] item)
{
try
{
// Do some stuff
}
catch (Exception ex)
{
// throw exception
return BadRequest("Error");
}
return Ok("Success");
}
My Code on the Fiori-Frontend:
Controller:
onTestButtonPress: async function (e) {
$.ajax({
type: "POST",
url: "http://myserver:5000/api/test",
dataType: "json",
crossDomain: true,
data: $.param({
"Firstname":"John",
"Lastname":"Rambo"
}),
success: function (response) {
console.log("Success");
},
error: function (response) {
console.log("Error");
}
});
}
I Have tried anything but I still receive the CORS error in Google Chrome. I also startet Google Chrome with diabled web-security:
chrome.exe --disable-web-security --disable-gpu
Does anyone have any idea what I am missing here?
Thanks a lot

Answer 1

If your SAPUI5 app runs on SAP Cloud Platform, you should define your REST API as a Destination and then consume that destination from your app.
If it runs on SAP Gateway (or any other web server you have control of), you may configure your server to respond with header like ‘Access-Control-Allow-Origin’ : ‘http://myserver:5000/api/test’

Answer 2

Now after a few hours struggling, finally it works. I have changed my code on the API as following:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(
"AllowOrigin",
builder => builder.WithOrigins("https://sap.mycompany.com:44315")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
});
services.AddAuthentication(IISDefaults.AuthenticationScheme);
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.Configure<MvcOptions>(options => options.Filters.Add(new CorsAuthorizationFilterFactory("AllowOrigin")));
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseCors("AllowOrigin");
app.UseMvc();
}
Also I have forgot to add the ContentType in my Ajax-Request:
$.ajax({
type: "POST",
url: "http://myserver:5000/api/test",
dataType: "json",
contentType: "application/json",
crossDomain: true,
data: $.param({
"Firstname":"John",
"Lastname":"Rambo"
}),
success: function (response) {
console.log("Success");
},
error: function (response) {
console.log("Error");
}
});

Answer 3

I had the same problem. For me help this --disable-web-security --user-data-dir as parameter for google chrome