Custom web part unable to call custom web API

Question

I'm unable to get my custom web part to connect to my custom Web API.

Ultimately, my goal is to secure the API using Azure AD and then call that API from my web part.

In the local workbench, I'm getting the following error:

ERROR: To view the information on this page, ask a global or SharePoint admin in your organization to go to the API management page in the new SharePoint admin center.

If I try it in the hosted workbench I get the same message but a 405 Method not allowed error appears in the console.

Here's my code:

this.context.aadHttpClientFactory
  .getClient('https://www.mysite.com/MyWebAPI')
  .then((client: AadHttpClient): void => {
    client
      .get('https://www.mysite.com/MyWebAPI/api/apps', AadHttpClient.configurations.v1)
      .then((response: HttpClientResponse): Promise<any> => {
        return response.json();
      })
      .then((data: any): void => {
        // process the data            
      }, (err: any): void => {
        this.context.statusRenderer.renderError(this.domElement, err);
      });
  }, (err: any): void => {
    this.context.statusRenderer.renderError(this.domElement, err);
  });

If I choose not to use the aadHttpClient and just do a normal get() and then remove the <Authorize> from my web API, I can connect without issue but the second I start trying to secure the API, I lose the ability to connect from the custom web part.

How do I fix this issue?

Answer 1

Ultimately, my issue was my web API. I'm not sure what was wrong, since I believe I followed the tutorial well but I ended up taking one of the SharePoint sample web APIs done in ASP.NET Core (whereas mine was a traditional .NET Web API) and copy over my models and controllers and I was able to connect without issue.