We Keep Coding

Consume third party API with Blazor WebAssembly [duplicate]

I have a blazor web assembly which fetches from an external API built on ASP.NET Core which I do not have access to. I can perform get requests, but cannot perform post requests. I get the following error when I do.
Access to fetch at 'http://external:9000/User/Create' from origin 'http://localhost:56138' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
The author of the api confirms he enabled cors to allow any header in his startup and also suggested I do the same but this did not fix the issue. I confirmed from the debugger I am sending the right data format the endpoint requires and I am also running on http scheme same as the web service.
This is the client configuration in program.cs
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://external:9000/") });
builder.Services.AddCors(policy =>
{
policy.AddPolicy("_myAllowSpecificOrigins", builder => builder.WithOrigins("http://external:9000/")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
This is how I post
var dataJson = JsonConvert.SerializeObject(application);
var stringContent = new StringContent(dataJson, Encoding.UTF8, "application/json");
var response = await _httpClient.PostAsync($"User/Create", stringContent);
I have read this is a common problem with blazor assembly, I'm not entirely sure of what I read. I am currently trying to move the project to blazor server to see if it would work, but I would prefer it on web assembly.

builder.Services.AddCors(policy =>
{
policy.AddPolicy("_myAllowSpecificOrigins", builder => builder.WithOrigins("http://external:9000/")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
This configuration should be done on a Server, and not yours but the server of the external API. You do nothing in that regard, except call end points on that Web Api.
The author of the api confirms they enabled cors to allow any header in his startup
If so, ask them for the code for confirmation...
and also suggested I do the same but this did not fix the issue.
You do nothing of the sort.
Workaround solution:
AS CORS is a security feature of JavaScript enforced by the browser, you can circumvent it by calling your Server code from which you perform the call to this Web Api end point, and then returns it back to your WebAssembly front-end. Use asynchronous code as much as you can.
Update as per comment
Are you saying I should have two projects, the server and the client under one solution? The server calls the calls the external api, then passes it to the client. Is this what your last suggestion is?
If you're using WebAssembly Blazor App hosted wherein the hosting server contains Web Api controllers, then you should expose end points that can be called from your WebAssembly front-end. The code in these end points should perform the HTTP calls to the external Web Api, and pass back to the WebAssembly calling methods the data received from the external Web Api.
Note: If you don't have such controllers ( they are created by default by Visual Studio), you may add them yourself to the server project.
If you already have created a Web Api project instead of those controllers, then expose the necessary end points from your Web Api project. Note that it makes no difference whether your Web Api project resides in the same solution of the WebAssembly front-end, as long as you provide the correct Url.
If you're using WebAssembly Blazor App stand alone; that is, the default installation does not create a Server project, you'll need to create a Web Api project and use it, unless you've already created one.

You are working with localhost so you should use this configuration to your Server:
builder.Services.AddCors(policy =>
{
policy.AddPolicy("_myAllowSpecificOrigins", builder =>
builder.WithOrigins("http://localhost:56138/")
.SetIsOriginAllowed((host) => true) // this for using localhost address
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
//
app.UseCors("_myAllowSpecificOrigins");

Angular app running localhost calling dotnet app on different port gets no-referrer-when-downgrade. Due to withCredentials?

I setup a new Angular app with Angular CLI and it runs on http://localhost:4200
I call webservices that I develop with dotnet core which runs on http://localhost:5000
I allowed CORS for the localhost setup. I am sure it worked in the past but now I get a
no-referrer-when-downgrade
error message in chrome.
It somehow has to do with withCredentials: true
If I put false then it works fine.
How can I pass credentials on http calls to a different port on the same localhost domain?

You might try to upgrade your .NET Core application to HTTPS.
The no-referrer-when-downgrade message indicates that the default referrer policy is in place as described here.
no-referrer-when-downgrade (default)
This is the default behavior if no policy is specified, or if the
provided value is invalid. The origin, path, and querystring of the
URL are sent as a referrer when the protocol security level stays the
same (HTTP→HTTP, HTTPS→HTTPS) or improves (HTTP→HTTPS), but isn't sent
to less secure destinations (HTTPS→HTTP).
Just for a test you might try to set the referrer policy for development environment to a different value (this code uses NWebsec.AspNetCore.Middleware):
if (env.IsDevelopment())
{
app.UseReferrerPolicy(opts => opts.UnsafeUrl());
}

It turned out it was no no-referrer-when-downgrade issue but a CORS issue.
I was missing the AllowCredentials() in the CORS policy
public void ConfigureServices(IServiceCollection services)
{
// add cors
services.AddCors(options =>
{
options.AddPolicy(name: "MyCorsPolicy",
builder => builder.SetIsOriginAllowed(s => s.Contains("localhost"))
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
}

CORS error in dev environment; works OK locally

I am trying to make an api call from a vue application to a .net core web api. Locally this works, when we then run it on our first dev environment we get this when it trys to make the request
Access to XMLHttpRequest at
'https://bla-api/api/foc?page=1&pageSize=10&sortBy=&sortDirection=ASC'
from origin 'https://bla-api' 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.
I have added the following to the C#' Startup file in the ConfigureServices method. To just get it working I wanted to provide the *(wildcard), so let anyone call this. So presume that the named policy AllowAnyOrigin would do this!?
readonly string _SpecificOrigins = "AllowSpecificOrigins";
services.AddCors(options =>
{
options.AddPolicy(_SpecificOrigins,
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
})
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
then also added this in the Configure method
app.UseCors(_SpecificOrigins);
app.UseMvc();
What am I missing? I also try and make a fiddler request to the api and it breaks.
Any help would be greatly appreciated

This was a red herring, the web api was not even deployed correctly, it was being deployued as a kestrel exe but was deployed as an azure web app. Adding a web.config pointing to the main api project resolved the issue. I did not write the deployment so that no needs looking at next. Presume the above question is fine then, cheers for the help

Asp.Net Core 2.0 HTTP -> HTTPS on Kestrel

I am learning Web-Based Programming and currently chose to work on Asp.Net Core 2.0.
I had successfully created a Web App with 2 layers of Controllers Home & API.
The Home Controller interacts directly with my Views while the API controller is called using GetAsync, PostAsync, PutAsync, etc. from my Home controller.
Recent I decided to move this app into HTTPS. Learned about self-signed certificates and had successfully gotten it to run except my API becomes inaccessible.
With SSL switched off, I could still call my API with Postman.
I used to call my API using this URI: http://localhost:5667/api/WebApi.
var response = client.GetAsync(“SomeApi”)
response.Wait();
Now I tried using URI: https://localhost:5667/api/WebApi but breaks at response.Wait().
Any advice, please. Thanks in advance
As requested: here’s a portion of my Startup.cs
services.AddMvc(
options =>
{
options.SslPort=5667;
options.Filters.Add(new RequireHttpsAttribute());
}
);
services.AddAntiforgery(
options =>
{
options.Cookie.Name=“_af”;
options.Cookie.HttpOnly = true;
options.Cookie.SecurePolicy=CookieSecurePolicy.Always;
options.HeaderName=“X-XSRF-TOKEN”;
}
)

HTTP and HTTPS cannot be served over the same port. If your localhost HTTP endpoint is on 5667, then likely your HTTPS endpoint is on 5668 - though you can check the port number for yourself in the info that Kestrel will log on startup.
In production, HTTP is typically served over port 80, while HTTPS is served over port 443. These are the defaults if you don't specify otherwise.
Separately, you might want to consider enabling HTTPS redirection in your Configure block:
app.UseHttpsRedirection();

TryGetFormCredentials returns null on cross-domain request

I've set up OAuth authentication in a project that uses WebAPI, and I had it working 100% fine.
Then I moved the front end app into a separate project in the solution. So now when I run the app, it's obviously on a different url (localhost:64049) to the API & Authentication Server (which are in the same project, server from localhost:63265).
To get CORS working, I believe I need to add this line to GrantResourceOwnerCredentials
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { allowedOrigin });
However, when I run it, the TryGetFormCredentials in ValidateClientAuthentication is not returning the clientId.
If I send the request from Fiddler/Postman, it still works.
What am I missing?

Managed to fix it by enabling CORS on the app in Startup.cs:
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
I had to remove the other Response Headers, though.