AxiosError {сообщение: "Ошибка сети", имя: "AxiosError", код: "ERR_NETWORK", конфигурация: {…}, запрос: XMLHttpRequest, …}

Я работаю над проектом, в котором внешний интерфейс встроен в реакцию и бэкэнд весной, и я не могу соединить их с помощью axios.

Имейте в виду, что бэкенд работает правильно (также я не очень хорошо реагирую).

это ошибка, которую я получаю в консоли:

  1. AxiosError {сообщение: "Ошибка сети", имя: "AxiosError", код: "ERR_NETWORK", конфигурация: {…}, запрос: XMLHttpRequest, …}

    1. код: "ERR_NETWORK"

    2. config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}

    3. сообщение: "Ошибка сети"

    4. имя: "AxiosError"

    5. запрос: XMLHttpRequest {данные: не определено, onreadystatechange: null, readyState: 4, время ожидания: 0, withCredentials: false, …}

    6. ответ: XMLHttpRequest {данные: не определено, onreadystatechange: null, readyState: 4, время ожидания: 0, withCredentials: false, …}

    7. [[Прототип]]: ошибка

это мой api.js:

import axios from 'axios';

const api = axios.create({
  baseURL: "https://localhost:8080"
});

export default api;

это мой App.js:

import './App.css';
import axios from "axios";
import {useEffect, useState} from 'react'
import api from './api.js';

function App() {
  const songs = async () => {
    try{
      const response = await api.get("/songs");
    }
    catch(err) {
      console.error(err);
    }
  };
  return (
     <div className="all-page">
             <main className="central-div">
                <h2>Taylor's Songs</h2>
                <button type="submit" className="quote-bttn" onClick={songs}>
                    FIND ME A QUOTE
                </button>
                <button type="submit" className="recommend-bttn">
                    GET ME A RECOMMENDATION
                </button>
             </main>
        </div>
  );
 
}

export default App;

проблема возникает всякий раз, когда я пытаюсь нажать кнопку "quote-bttn".

Если кто-нибудь знает, как решить эту проблему, я был бы очень признателен!

(также, если я что-то упустил, это полный код: https://github.com/vitoriaacarvalho/my-taylor-swift-api/commit/0276222d35aa9a3fda8033f594d9727feded854b")

Похоже на ошибку cors

Konrad 19.11.2022 19:20
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
4
1
6 024
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Кажется, вы используете запрос https, а не http. Ваш базовый URL означает, что ваш сервер находится на вашем локальном компьютере. Доступ к локальным серверам можно получить как по http, так и по https, но если вы уверены, что настроили свой SSL-сертификат для доступа к HTTPS-запросам, попробуйте проверить политику/ограничения CORS на серверной части. В идеале следует выбрать CORS: «AllowAll», но вы также можете настроить его так, чтобы запрос принимался только с назначенного клиентского порта.

это мне так помогло! спасибо! для тех, кто в будущем столкнется с той же проблемой, вот как код, который я использовал: открытый класс WebMvcConfig реализует WebMvcConfigurer{ Override public void addCorsMappings(CorsRegistryRegistry) {Registry.addMapping("/**") .allowedMethods("") . allowOrigins("") .allowedHeaders("*") .allowCredentials(false) .maxAge(86400); } }

vitoriac 22.11.2022 00:05

Если вы примеряете локалку, корс значения не имеет. Вам необходимо убедиться, что вы указываете правильный URL-адрес конечной точки на серверной части.

Например, если URL-адрес вашей конечной точки находится http://localhost:5000/api в бэкэнде, а спереди вы указываете на http://localhost:5000/api2, это опечатка вызовет «Networ Error» от axios.

Cors имеет значение в локальной среде, поскольку порт хоста имеет значение в Cors Same Origin Policy (w3.org/Security/wiki/Same_Origin_Policy)

Ar7hurz1nh0 30.12.2022 16:30

Хотя вы можете проверить свое соединение без настройки cors, поэтому я сказал, что это не имеет значения в локальном режиме.

Moisés Santana V 01.01.2023 08:26

Вы также можете отправить что-то от почтальона, используя локальный без корса, и это будет работать, поэтому, пожалуйста, удалите «мой ответ бесполезен».

Moisés Santana V 01.01.2023 08:29

Нет, вы не можете протестировать локальную или любую другую среду без корса, не отключив ее в первую очередь. Кроме того, функциональность cors не работает в таких клиентах, как Postman, Insomnia, HTTPie или curl, просто потому, что это защитная мера, которую БРАУЗЕРЫ используют при работе с разными доменами (вы можете видеть отправленные заголовки, но это практически бесполезно на клиентов, которых я упомянул). Я не буду удалять метку «мой ответ бесполезен» в соответствии с тем, что я сказал выше, и поскольку ответ на вопрос не коррелирует с cors, это проблема с использованием https без настройки ssl.

Ar7hurz1nh0 02.01.2023 17:57

Другие вопросы по теме