API 和 UI 之间的访问错误（react JS）

Question

我使用 React 在 JS 中创建了 UI 部分（这是我的第一次体验 - 这可能是错误的）。 我还创建了后端部分 - 它运行良好，我对其进行了测试。 当我尝试联合它时 - 我收到此错误。 我有访问问题 ->当用户单击提交按钮时（我收到此错误）

你能解释一下我做错了什么吗？ 我认为我的 UI 部分很好，我认为 API 部分存在问题。 我附上了两个： UI（反应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 && (<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;

JS 中的 API ：

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

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

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

我在 C# 中创建的 API

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

{
    [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);
        }
    }
}

城市景观模型

{
    public class TownViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

后端部分运行良好

Answer 1

尝试在控制器顶部添加 [EnableCors("AllowAll")]

Answer 2

浏览器采用同源策略实现 - 这意味着默认情况下会阻止跨域边界（不同来源）的任何请求。 但这是一个常见用例 - 您想要从不同来源获取公共资源。 例如，您需要从第三方提供商处获取数据。

为了完成这项工作，提供数据的服务器需要让浏览器知道“请求来自的源可以访问我的资源/数据”。 浏览器记住这一点并允许跨源资源共享。

第 1 步：浏览器

当浏览器发出跨域请求时，浏览器会添加一个带有当前源（方案、主机和端口）的 Origin 标头。

第二步：服务器

在服务器端，当服务器看到这个标头并想要允许访问时，它需要在响应中添加一个 Access-Control-Allow-Origin 标头，指定请求的来源（或 * 以允许任何来源。）

第三步：浏览器接收响应

当浏览器看到带有适当 Access-Control-Allow-Origin 标头的响应时，浏览器允许与客户端站点共享响应数据。

因此，如果您想将应用程序投入生产，那么您需要实现的是第 2 步，检查请求的原始标头是否来自有效的白名单 URL（如您的 UI 应用程序 URL），然后设置 Access-Control-Allow - 原标题。