405 error. POST API + React

Question

Всем привет. У меня проблема с 405 ошибкой. Я создал API, затем вызываю его в своем React code. Я провел тесты и API работает нормально и выдает нужную информацию, однако я не совсем понимаю из-за чего может быть ошибка 405

Тут я вызываю свой api, который я создал в components. Ниже прикреплю его Мой код API(работает нормально и выдает нужную информацию) :

[Route("api")]
    [ApiController]
    [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
    public class AccountController : ControllerBase
    {
        private readonly IAccountService _accountService;

        public AccountController(IAccountService accountService)
        {
            _accountService = accountService;
        }

        [HttpPost]
        [Route("get.accountsByAccountType")]
        public async Task<IList<AccountViewModel>> GetAccountsByAccountTypes([FromBody] IList<int> accountTypes)
        {
            return await _accountService.GetAccountsByAccountTypes(accountTypes);
        }
    }

Мой React code(1):

import React, { useState } from 'react';
import { Spin, Select, Button, Form, Checkbox } from 'antd';
import PropTypes from 'prop-types';
import { useFetch } from XXX;
import * as apiService from 'services/ApiService';
import AccountType from 'components/AccountType';
import AccountsByAccountType from 'components/AccountsByAccountType';
import { LAYOUT, TAIL_LAYOUT } from 'constants/layouts';
import styles from './MoveProperty.scss';

const MoveProperty = () => {
  const [isLoading, moveProperties] = useFetch(apiService.moveProperty);
  const [clients, isClientLoading] = useFetch(apiService.getAllClents);
  console.log(clients);
  const [selectedAccountTypes, setSelectedItems] = useState([]);
  const handleFormFinish = (formValue) => moveProperties(formValue);
  const { accountId } = accountId;

  function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }

  const accountSearch = () => {
    const filteredAccounts = {
      accountId: parseInt(accountId, 10),
      accountTypes: selectedAccountTypes,
    };
  };

  console.log(selectedAccountTypes);

  return (
    <Spin spinning={isLoading}>
      <Form {...LAYOUT} onFinish={handleFormFinish}>
        <Form.Item {...TAIL_LAYOUT}>
          <Select loading={isClientLoading}>
            {clients && clients.map(({ clientId, clientName }) => (
              <Select.Option key={clientId} value={clientId} title={clientName}>{clientName}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={onChange}>Use existing Source</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Checkbox onChange={onChange}>Use existing merchant accounts</Checkbox>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <AccountType onSelectingItems={setSelectedItems} />
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" onClick={accountSearch} className={styles.submitButton}>Search Account</Button>
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <AccountsByAccountType accounts={selectedAccountTypes} onSelectingItems={setSelectedItems} />
        </Form.Item>
        <Form.Item {...TAIL_LAYOUT}>
          <Button htmlType="submit" className={styles.submitButton}>Move Property</Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

MoveProperty.propTypes = {
  accountsId: PropTypes.arrayOf(PropTypes.shape({})),
  onSelectingItems: PropTypes.func,
};

MoveProperty.defaultProps = {
  accountsId: [],
  onSelectingItems: () => { },
};

export default MoveProperty;

Component:

import React from 'react';
import { Table, Spin } from 'antd';
import PropTypes from 'prop-types';
import { useFetch } from XXX;
import * as apiService from 'services/ApiService';

const AccountsByAccountType = ({ accountType, onSelectingItems }) => {
  const [data, isLoading] = useFetch(apiService.getAccountByAccountType, { initialData: [], params: accountType });

  return (
    <Spin spinning={isLoading}>
      <Table
        key="id"
        bordered="true"
        rowKey="id"
        dataSource={data}
        rowSelection={{ onChange: onSelectingItems }}
        pagination={false}
      >
        <Table.Column title="Account Type" dataIndex="accountTypeName" />
        <Table.Column title="Account Number" dataIndex="accountNumber" />
        <Table.Column title="Account Name" dataIndex="name" />
      </Table>
    </Spin>
  );
};

AccountsByAccountType.propTypes = {
  accountType: PropTypes.arrayOf(PropTypes.shape({})),
  onSelectingItems: PropTypes.func,
};

AccountsByAccountType.defaultProps = {
  accountType: [],
  onSelectingItems: () => { },
};

export default AccountsByAccountType;

И на выходе у меня вылетает 405 ошибка(console)

БЛОГ НА HUSL

405 error. POST API + React

Ответы (0 шт):