Блог

Главная - Вопросы по программированию - axios get/post не может получить доступ к быстрому API

axios get/post не может получить доступ к быстрому API

#reactjs #authentication #ssl #axios #fastapi

Вопрос:

Я работаю над приложением react, в котором мне приходится использовать множество запросов GET и POST. интерфейс использует axios в качестве http-клиента, в то время как API-интерфейсы построены с помощью FASTAPI. в настоящее время я использую только базовую аутентификацию (для которой требуется имя пользователя и пароль). API имеет размещенный пользовательский интерфейс, т. е. https://81.000.000.11. Источник также был разрешен серверной частью. т. е.

 origins = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
    "https://headacheapp.testenv.com",
]
 
 app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    # allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Проблема я столкнулся это: запросы из приложения работает только тогда, когда я войти в API пользовательского интерфейса. т. е. https://81.000.000.11/login (может, он хранит имя пользователя и пароль ИДК где-то в моем браузере скрытых систем хранения, так что, когда я очищаю историю браузера, а также запросы снова не работает из приложения.)
стр. сек. ОН ОТЛИЧНО РАБОТАЕТ ЧЕРЕЗ ПОЧТАЛЬОНА BASIC АВТОРИЗАЦИИ.

вот как выглядит мой ЗАПРОС на ПОЛУЧЕНИЕ

     await axios({
      url: `${apiUrl}/transactions/users/${state.user_id}`,
      method: 'get',
      crossDomain: true,
      headers: { 
          "Authorization": "Basic averylongwierdencryptedtokensharedbybackendteam==",
          'accept' : 'application/json',
          'content-type': 'application/x-www-form-urlencoded'
        },
      auth: { username: credentials.username, password: credentials.password },
  
    }).then((response) => {
      setAllTransactions(response.data);
      walletBalance(response);
      setIsLoading(false);
    }).catch((error) => {
      console.error(error)
    });
  }

вот как выглядит мой ЗАПРОС на ПУБЛИКАЦИЮ

       await axios({
        method: "post",
        url: `${apiUrl}/transactions`,
        headers: {
          Authorization:
            "Basic averylongwierdencryptedtokensharedbybackendteam=",
            'accept' : 'application/json',
            'content-type': 'application/x-www-form-urlencoded'
        },
        auth: {
          username: credentials.username,
          password: credentials.password,
        },
        data: {
          user_id: state.user_id,
          transaction_id: "",
          buy_sell: "buy",
          batch_date: "",
          acknowledge_date: "",
          price: finalPrice.amount,
          status: "pending",
        },
      }).then(function (response) {
        
        alert(response.data.detail);
        setAlert(false);
      });
    } catch (err) {
      console.error(err);
    }

Резюме: запросы будут работать только из браузеров, в которых я вошел в пользовательский интерфейс FASTAPI, он будет показывать ошибки примерно так.

изображение ошибки http,

Я перепробовал все, что мог, но теперь я здесь, чтобы получить помощь от экспертов. Заранее спасибо за вашу помощь.

Ответ №1:

Ошибка, которую вы получаете, исходит от браузера, и она говорит вам, что вы предоставляете ненадежный сертификат с сервера FastAPI.

Проблема в том, что вы используете HTTPS, но сертификат, с помощью которого вы настроили FastAPI, не является надежным для вашего браузера. Вам понадобится один из:

  1. Запуск в небезопасном режиме при разработке (HTTP вместо HTTPS).
  2. Купите сертификат у доверенного центра сертификации для вашего производственного домена («headacheapp.testenv.com»), и настройте DNS-сервер разработки, чтобы он указывал на ваш локальный хост.
  3. Добавьте центр сертификации, с которым вы подписали сертификат FastAPI, в цепочку доверия вашего браузера. Не делайте этого, если вы действительно не знаете, что делаете.
Метки: