I am trying to enable CORS within my ASP.NET Core API and allow passing cookies from my client application (Angular 6). However, whenever I attempt to hit an endpoint through my Angular application, I am receiving the following error:
Response to preflight request doesn't pass access control check: The
value of the 'Access-Control-Allow-Origin' header in the response must
not be the wildcard '*' when the request's credentials mode is
'include'
Within my Startup.cs file, I have CORS enabled under ConfigureServices like:
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
.WithOrigins("http://localhost:4200"));
});
and under Configure:
app.UseCors("CorsPolicy");
In my Angular 6 application, I am calling the endpoint with a token like this:
this.http.get<T>(url, { headers: new HttpHeaders({ 'X-XSRF-TOKEN': token}), withCredentials: true });
The error is confusing because I am explicitly setting the allowed origins in .WithOrigins() within my .AddCors function, yet it's still saying there is only a wild card.
If this is hosted on Azure. Check the CORS settings in Azure AppService. The configurations there will override any other Cors configuration even in the .net core middleware.
within
public void ConfigureServices(IServiceCollection services)
after
services.AddMvc()
try
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
then within
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
try
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("CorsPolicy");
Once you do the above to your asp.net core api, you can test as shown below
if you can get the options request to the api to respond with the above headers, you have resolved the api CORS issue, then its time to move onto the angular 6 code.
Related
I'm developing an angular project that consumes a Web API .NET Core project.
I have used JWT Bearer authorization in my web API project, and now I want to use it with angular as well.
I have enabled CORS in Startup.cs as below and used [EnableCors("ApiCorsPolicy")] attribute with my controllers
public void ConfigureServices(IServiceCollection services)
{
//.....
services.AddCors(options => options.AddPolicy("ApiCorsPolicy", builder =>
{
builder.WithOrigins("http://localhost:4200")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
}));
//.....
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//.....
app.UseRouting();
app.UseSession();
app.UseAuthentication();
app.UseAuthorization();
app.UseCors("ApiCorsPolicy");
app.UseHttpsRedirection();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
//.....
}
Then for my angular project, I installed the angular2-jwt library and used it as described in this article
But I received this error
Access to XMLHttpRequest at 'https://localhost:44346/api/items' from origin 'http://localhost:4200' 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.
And yes when I checked the Network tab, I didn't find the 'Access-Control-Allow-Origin' header, but when I remove the Authorize attribute from my controller it works and I can see the 'Access-Control-Allow-Origin' header is added to the response headers successfully.
How can I fix this problem?
Thanks in advance.
So I 've made a web app using Vue, and I'm using ASP.NET Web App (.NET 5) for the backend.
When I run the Web API locally on localhost:44393 it works just great making POST & GET requests from the client that's running locally.
I then go to click "Publish" to send the files over to where I'm hosting.
At this point I change the URL that the client uses to make requests to https://api.mywebsite.com which is the same website as the one that was running locally since I published it now.
(it makes these requests using fetch so it would be fetch("https://api.mywebsite.com/TheController/AddServer" for instance)
This is where it gets weird because when I make a post request to register or sign in, it works just fine, but as soon as I go to "Add post" which is a form that posts to a different endpoint on the API, I get this error.
Access to fetch at 'https://api.mywebsite.com/TheController/AddPost'
from origin 'https://mywebsite.com' has been blocked by CORS
policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.
And that doesn't happen when I run the web API locally. Why is it that it only occurs after I publish the files to my host and use the actual domain?
(I tried making the same request from the client when it's running locally too but it gives the exact same exception)
I switched out the domain name in the question to mywebsite.com because I don't want to share it.
Here is my ConfigurationServices
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("https://mywebsite.com",
"http://localhost:8080",
"https://mywebsite.com/add")
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
...
And the Configure
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "mcraftserverapi v1"));
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapControllers()
.RequireCors(MyAllowSpecificOrigins);
});
}
you have to remove
builder.WithOrigins("https://mywebsite.com",
"http://localhost:8080"
)
or
.AllowAnyOrigin()
you can't use them together
I'm using Visual Studio to publish an ASP.NET Core 2.1 app to AWS Lambda (serverless). No matter what I've tried I cannot get CORS to work.
All I really want to do is add the header access-control-allow-origin globally to my web app.
Has anyone ever successfully added headers to an ASP.NET Core 2.1 Serverless app?
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
// AddCors must be before AddMvc
services.AddCors();
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
);
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// UseCors must be before UseMvc
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
// Also tried this
// app.UseCors(
// o => o.WithOrigins("http://example.com").AllowAnyMethod()
//);
app.UseMvc();
}
No CORS headers are added to my pages. I'm using Chrome dev tools to inspect my headers. I should see them on the homepage (for example) correct?
Any ideas? I'm dyin over here. Thanks!
EDIT
This application only uses API Gateway, Lambda and a few other services. It's great because I'm only charged when someone hits my app. There are no hourly charges. No EC2 or ELB which is amazing.
Also, I almost added this to my original post. The article #sturcotte06 references has a gotcha.
The API Gateway (automatically generated) uses the ANY method in a proxy integration. The above article says this...
Important
When applying the above instructions to the ANY method in a proxy integration, any applicable CORS headers will not be set. Instead, your backend must return the applicable CORS headers, such as Access-Control-Allow-Origin.
Ugh! So it's saying I must do this on the backend (Startup.cs right?) which is exactly what seems to get ignored when published.
For whatever reason app.UseCors does not work in my scenario. However, app.Use does...
app.Use((context, next) =>
{
context.Response.Headers["Access-Control-Allow-Origin"] = "https://example.com";
return next.Invoke();
});
app.UseMvc();
I have an SPA with React Typescript and .Net core 2.1.
The application has been deployed to an webapp in Azure.
The problem occurs after I have done a refresh on the web application, but not on the first login.
All my request goes through as well.
I have enabled Cors on the server side and also implemented cors in the backend.
I think the issue occurs inside registerServiceWorker.ts but not sure how to fix it.
I have not done any configurations in this file so it's only the default values.
Hope someone can point me in the right directions.
Backend .net core:
public void ConfigureServices(IServiceCollection services)
{
// cors
services.AddCors(options =>
{
options.AddPolicy("AllowAll",
builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// global policy
app.UseCors("AllowAll");
}
[Route("api/[controller]")]
[EnableCors("AllowAll")]
[Authorize]
[ApiController]
public class AuthController : ControllerBase
Found out why it was redirecting.
Had some issues with refreshing the token from server that did not work correctly.
I have an application up and running on Azure and I'm trying to post data from an ESP8266 to https://myApplication.azurewebservices.net/api/call. But I'm not getting anywhere. The ESP8266 seems to have trouble handling HTTPS and so I thought I would try to enable HTTP POST requests.
My startup class looks like this:
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddDbContext<AppDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("MyDatabase")));
services.AddIdentity<User, IdentityRole>()
.AddEntityFrameworkStores<AppDbContext>();
services.AddCors();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors(options => options.AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod());
app.UseDeveloperExceptionPage();
app.UseAuthentication();
app.UseMvcWithDefaultRoute();
}
I thought that by allowing anyheaders, anyorigin, and anymethod would allow me to post HTTP requests.
But trying it in Postman still returns a 404 not found if I do http://myApplication.azurewebservices.net/api/call, but it does work if I use https://.
How can I make my application accept the exact same request but with HTTP instead of HTTPS?
You need to specifically enable HTTP requests for your App Service in the Azure Portal.
Dashboard > App Service > Custom Domains > disable "HTTPS only"