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 - 原標題。