title: 405 (Method Not Allowed) on reactjs component
body: <p>I am trying to call an endpoint with post method.</p>
  
  <p>The code is:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Input} from 'antd';
  import Form from '../../components/uielements/form';
  import Button from '../../components/uielements/button';
  import Notification from '../../components/notification';
  import { adalApiFetch } from '../../adalConfig';
  
  
  const FormItem = Form.Item;
  
  class CreateSiteCollectionForm extends Component {
      constructor(props) {
          super(props);
          this.state = {Alias:'',DisplayName:'', Description:''};
          this.handleChangeAlias = this.handleChangeAlias.bind(this);
          this.handleChangeDisplayName = this.handleChangeDisplayName.bind(this);
          this.handleChangeDescription = this.handleChangeDescription.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      };
  
      handleChangeAlias(event){
          this.setState({Alias: event.target.value});
      }
  
      handleChangeDisplayName(event){
          this.setState({DisplayName: event.target.value});
      }
  
      handleChangeDescription(event){
          this.setState({Description: event.target.value});
      }
  
      handleSubmit(e){
          e.preventDefault();
          this.props.form.validateFieldsAndScroll((err, values) =&gt; {
              if (!err) {
                  let data = new FormData();
                  //Append files to form data
                  //data.append(
  
                  const options = {
                    method: 'post',
                    body: JSON.stringify(
                      {
                          "Alias": this.state.Alias,
                          "DisplayName": this.state.DisplayName, 
                          "Description": this.state.Description
                      }),
                    config: {
                      headers: {
                        'Content-Type': 'multipart/form-data'
                      }
                    }
                  };
  
                  adalApiFetch(fetch, "/SiteCollections/CreateModernSite", options)
                    .then(response =&gt;{
                      if(response.status === 204){
                          Notification(
                              'success',
                              'Site collection created',
                              ''
                              );
                       }else{
                          throw "error";
                       }
                    })
                    .catch(error =&gt; {
                      Notification(
                          'error',
                          'Site collection not created',
                          error
                          );
                      console.error(error);
                  });
              }
          });      
      }
  
      render() {
          const { getFieldDecorator } = this.props.form;
          const formItemLayout = {
          labelCol: {
              xs: { span: 24 },
              sm: { span: 6 },
          },
          wrapperCol: {
              xs: { span: 24 },
              sm: { span: 14 },
          },
          };
          const tailFormItemLayout = {
          wrapperCol: {
              xs: {
              span: 24,
              offset: 0,
              },
              sm: {
              span: 14,
              offset: 6,
              },
          },
          };
          return (
              &lt;Form onSubmit={this.handleSubmit}&gt;
                  &lt;FormItem {...formItemLayout} label="Alias" hasFeedback&gt;
                  {getFieldDecorator('Alias', {
                      rules: [
                          {
                              required: true,
                              message: 'Please input your alias',
                          }
                      ]
                  })(&lt;Input name="alias" id="alias" onChange={this.handleChangeAlias} /&gt;)}
                  &lt;/FormItem&gt;
                  &lt;FormItem {...formItemLayout} label="Display Name" hasFeedback&gt;
                  {getFieldDecorator('displayname', {
                      rules: [
                          {
                              required: true,
                              message: 'Please input your display name',
                          }
                      ]
                  })(&lt;Input name="displayname" id="displayname" onChange={this.handleChangedisplayname} /&gt;)}
                  &lt;/FormItem&gt;
                  &lt;FormItem {...formItemLayout} label="Description" hasFeedback&gt;
                  {getFieldDecorator('description', {
                      rules: [
                          {
                              required: true,
                              message: 'Please input your description',
                          }
                      ],
                  })(&lt;Input name="description" id="description"  onChange={this.handleChangeDescription} /&gt;)}
                  &lt;/FormItem&gt;
  
                  &lt;FormItem {...tailFormItemLayout}&gt;
                      &lt;Button type="primary" htmlType="submit"&gt;
                          Create modern site
                      &lt;/Button&gt;
                  &lt;/FormItem&gt;
              &lt;/Form&gt;
          );
      }
  }
  
  const WrappedCreateSiteCollectionForm = Form.create()(CreateSiteCollectionForm);
  export default WrappedCreateSiteCollectionForm;
  </code></pre>
  
  <p>and the webapi is this one:</p>
  
  <pre><code>using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using System.Web.Http;
  using TenantManagementWebApi.Entities;
  using TenantManagementWebApi.Factories;
  using Cosmonaut.Extensions;
  using Microsoft.Online.SharePoint.TenantAdministration;
  using Microsoft.SharePoint.Client;
  using OfficeDevPnP.Core.Sites;
  using TenantManagementWebApi.Components;
  
  namespace TenantManagementWebApi.Controllers
  {
      [Authorize]
      public class SiteCollectionsController : ApiController
      {
          // GET: ModernTeamSite
          public async Task&lt;List&lt;TenantManagementWebApi.Entities.SiteCollection&gt;&gt; Get()
          {
              var tenant = await TenantHelper.GetTenantAsync();
  
              using (var cc = new OfficeDevPnP.Core.AuthenticationManager().GetAppOnlyAuthenticatedContext(tenant.TenantAdminUrl, tenant.ClientId, tenant.ClientSecret))
              {
                  Tenant tenantOnline = new Tenant(cc);
                  SPOSitePropertiesEnumerable siteProps = tenantOnline.GetSitePropertiesFromSharePoint("0", true);
                  cc.Load(siteProps);
                  cc.ExecuteQuery();
                  List&lt;TenantManagementWebApi.Entities.SiteCollection&gt; sites = new List&lt;TenantManagementWebApi.Entities.SiteCollection&gt;();
                  foreach (var site in siteProps)
                  {
  
                      sites.Add(new TenantManagementWebApi.Entities.SiteCollection()
                      {
                          Url = site.Url,
                          Owner = site.Owner,
                          Template = site.Template,
                          Title = site.Title
                      });
                  }
  
                  return sites;
              };
          }
  
          [HttpPost]
          //[Route("api/SiteCollections/CreateModernSite")]
          public async Task&lt;string&gt;  CreateModernSite(string Alias, string DisplayName, string Description)
          {
              var tenant = await TenantHelper.GetTenantAsync();
              using (var context = new OfficeDevPnP.Core.AuthenticationManager().GetAppOnlyAuthenticatedContext(tenant.TenantAdminUrl, tenant.ClientId, tenant.ClientSecret))
              {
                   var teamContext = await context.CreateSiteAsync(
                      new TeamSiteCollectionCreationInformation
                      {
                          Alias = Alias, // Mandatory
                          DisplayName = DisplayName, // Mandatory
                          Description = Description, // Optional
                          //Classification = Classification, // Optional
                          //IsPublic = IsPublic, // Optional, default true
                      }
                  );
                  teamContext.Load(teamContext.Web, w =&gt; w.Url);
                  teamContext.ExecuteQueryRetry();
                  return teamContext.Web.Url;
              }
          }
      }
  }
  </code></pre>