Блог

Я создал серверную часть и после этого начал работать с пользовательским интерфейсом.Я использовал JS (React). Это мой первый опыт, и я получаю проблему. Когда пользователь нажимает на кнопку отправки, я получаю эту ошибку:

Я абсолютно уверен, что проблема в части пользовательского интерфейса. Я думаю, что я сделал что-то не так. Моя серверная часть работает хорошо. И проблема не в CORS. Но я не вижу, что я делаю неправильно в JS (React). Не могли бы вы рассказать мне о моих проблемах? Файлы Js:

 import React from 'react';
import { Link } from 'react-router-dom';
import { notification, Alert, Spin, Form, Input, Button, Typography } from 'antd';
import { usePromise } from 'innroad.common.ui';
import * as apiService from 'services/ApiService';
import { LAYOUT, TAIL_LAYOUT } from 'constants/layouts';
import styles from './AddTownCreation.scss';

const AddTownCreation = () => {
  const onFail = () => notification.error({ message: 'some error occured while creating template' });

  const [{ data, isLoading }, createNewTown] = usePromise(apiService.createTown, { initialData: [], onFail });

  const handleFormFinish = (formValue) => createNewTown(formValue);

  return (
    <>
      <Spin spinning={isLoading}>
        <Typography.Title>Create New Town</Typography.Title>
        {data.length > 0 amp;amp; (<Alert message={`New town id : ${data.join(',')}`} type="info" />)}
        <Form {...LAYOUT} onFinish={handleFormFinish}>
          <Form.Item
            name="name"
            label="Town Name :"
            rules={[{ whitespace: true, required: true, message: 'This is required field' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item {...TAIL_LAYOUT}>
            <Button htmlType="submit" className={styles.rightMargin}>Submit</Button>
            <Button type="link" className="ant-btn"><Link to="/">Cancel</Link></Button>
          </Form.Item>
        </Form>
      </Spin>
    </>
  );
};

export default AddTownCreation;
  

AddTownCreation.scss JS:

 .rightMargin {
    margin-right: 8px;
}

  

Index.JS:

 export { default } from './AddTownCreation';
  

Служба Api. JS:

 import { get, post } from './HttpService';

/**
 * ---------------------------------
 * endpoints
 * ---------------------------------
 */

export const createTown = async (data) => post('/add.town', data);

  

Серверная часть
API

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using innSupportTools.Services;
using innSupportTools.ViewModels;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace XXX
{
    [Route("api")]
    [ApiController]
    public class TownController : ControllerBase
    {
        public readonly ITownService _townService;

        public TownController(ITownService townService)
        {
            _townService = townService;
        }

        [HttpPost]
        [Route("add.town")]
        public async Task<int> InsertTown([FromBody] TownViewModel town)
        {
            return await _townService.InsertTown(town.Name);
        }

        [HttpGet]
        [Route("GetTown/{townId}")]
        public async Task<TownViewModel> GetTown(int townId)
        {
            return await _townService.GetTown(townId);
        }
    }
}
  

Есть две проблемы

1. вы должны исправить проблему с cors в серверной части

2. export { default } from './AddTownCreation';** это неправильный оператор импорта в index.js файл, это должно быть import AddTownCreation from './AddTownCreation';

CORS — известная проблема. Ошибка возникает из-за механизма безопасности, который реализуют браузеры, называемого политикой того же источника its для «подделки межсайтовых запросов». вы можете проверить на YouTube, у вас есть много руководств по нему.

Если это просто ваш локальный домашний проект, чтобы познакомиться с React, вы можете просто настроить свое пользовательское приложение на том же веб-сервере, и никаких проблем не возникнет