3

My controller's methods in Blazor's server side WebApi returns an html/text response instead of application/json which leds to The provided ContentType is not supported; the supported types are 'application/json' and the structured syntax suffix 'application/+json'. error. What is the best way to manually set the content type of the response to application/json?

My Controller with a Get method

 [Route("api/[controller]")]
[ApiController]
public class DeveloperController : ControllerBase
{
    private readonly ApplicationDBContext _context;

    public DeveloperController(ApplicationDBContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult> Get()
    {
        var devs = await _context.Developers.ToListAsync();
        return Ok(devs);
        
    }

and the call from Client side page

developers = await client.GetFromJsonAsync<Developer[]>("api/developer");

Thanks for all the answers, and as always, happy coding!

EDIT1: A chrome dev console screen pic

H H
  • 263,252
  • 30
  • 330
  • 514
qki
  • 1,769
  • 11
  • 25
  • First of all check if the api is actually returning a json and not an error page for some reason? – Umair Sep 12 '20 at 14:24
  • @Umair according to chrome dev console my api's method returns Status Code:200 so I don't see a problem here, but i don't really know if thats what you were asking for. Im pretty new to the WebApi concept so I might get lost somewhere – qki Sep 12 '20 at 14:33
  • You are getting a 200 for delivering an HTML page. – H H Sep 12 '20 at 14:38
  • @HenkHolterman please check my edit in the question – qki Sep 12 '20 at 14:42
  • Now drop that url from the screenshot in the browser bar and see what happens. You ought to see some json. – H H Sep 12 '20 at 14:43
  • @HenkHolterman after putting the url in the browser bar, it says "Sorry, there's nothing at this address.". This is Blazor WebAssembly App – qki Sep 12 '20 at 14:55
  • And is the API running on the same port number? ie :44375 ? – H H Sep 12 '20 at 14:56
  • I think so, yes - this is the "WebApi" on the Blazor.Server project so it has to. I made the app according to tutorial in which everything worked, but that was on previous blazor version. You can check that out: https://www.codewithmukesh.com/blog/blazor-crud-with-entity-framework-core/ – qki Sep 12 '20 at 15:01
  • Yes I did checked that box. I did not change the base href. Im pretty sure the error im getting is from the text/HTML content type. According to some issue trackers after some update the blazor's webapi started to return text/html by default – qki Sep 12 '20 at 15:11
  • You have already verified yourself that it returns a "sorry nothing here page" from the Wasm client. Your routing is broken, it never called tthe API. – H H Sep 12 '20 at 15:22
  • @HenkHolterman I added the Route part in the WeatherForecastController, and went to https://localhost:44372/fetchdata/api in my browser - same thing with the "Sorry, there's nothing at this address." – qki Sep 12 '20 at 15:31
  • I also checked /api/fetchdata - didnt work. But /api/WeatherForecast worked, I can see the JSON – qki Sep 12 '20 at 15:46
  • @HenkHolterman but doing the same in my project (with the WeatherController) doesn't work while in new project it worked - but 100% the project template is the same. I have a EFCore implementation which uses my local database - other than that there is no difference in minimal reroducible example and my project – qki Sep 12 '20 at 16:03
  • @HenkHolterman I realized that my Blazor.Client project is compiling while Blazor.Server throws error but i do not know what error it is. In minima reproducible example both Blazor.Client and Blazor.Server are compiling.I will try to find the reason why it does not compile – qki Sep 12 '20 at 17:12
  • @HenkHolterman I just copied everything to a new project and /api/developers/get started working - I can see my JSON on the site. Unfortunately, im still getting `Unhandled exception rendering component: The provided ContentType is not supported; the supported types are 'application/json' and the structured syntax suffix 'application/+json'.` error. Not that have to be linked to method returning text/html instead of application/json. Any suggestions with that? – qki Sep 12 '20 at 17:33
  • Your problem is still in the routing. Your API itself is fine. But the `[Route(...)]` does not match up with the `GetFromJson(...)` url. Debug with the dev tools (F12) – H H Sep 12 '20 at 17:43
  • If you don't have anything critical in your project, can you upload it to your GitHub or upload a zip to g-drive or onedrive? I can have a quick look at it and let you know. – Umair Sep 12 '20 at 17:48
  • blazor-server-side is the Blazor kind your are _not_ using. You can read the tag descriptions. Though I admit they are not very clear. – H H Sep 12 '20 at 17:59
  • Here is the project https://drive.google.com/file/d/1Uq6Ap9-Ff3-3xV7m0pOfFwElhyaBjiXv/view?usp=sharing . It's basic template with few classes which I added. I admit to the tags, I will change them, sorry. – qki Sep 12 '20 at 18:02

2 Answers2

3

When you create a Blazor Webassembly app with the Hosted option you create an API server that also launches the SPA application.

When you call the API from the SPA, any error in routing does not give a 404 error but instead it returns a Blazor page (with "sorry, nothing here"), code 200. Because all 'remaining' urls are routed to the client.

That HTML page trips up the Json deserializer in GetFromJsonAsync(). Resulting in the errormessage:

The provided ContentType is not supported; the supported types are 'application/json' and the structured syntax suffix 'application/+json'

So, in conclusion, your API method is fine. It just never is called. Put a breakpoint in the Get() action, it won't be hit. You have to debug the routing (server) and url (client) combination.

In this case, the error is not in the posted code, that should have worked. It must be a change you made in index.cshtml , Server.Startup.cs or Client.Program.cs

H H
  • 263,252
  • 30
  • 330
  • 514
  • Special thanks to @HenkHolterman and Umair for all the help. It turned out that indeed the Api was not working, I still dont know why - I copied my project to a new project and it worked (I finally had a JSON result in "api/controller"). Next mistake was not calling specific method from the Api - I followed the tutorial exacly step-by-step but there was not a [Route] parameter in the controller, thus the error. – qki Sep 12 '20 at 20:56
  • This helped me solve the problem. In my case I missed the 'endpoints.MapControllers()' in the startup UseEndpoints part. – Cedervall Mar 08 '23 at 10:25
1

I needed to set the server project as the startup project.

starball
  • 20,030
  • 7
  • 43
  • 238
Tyler
  • 11
  • 2