Я работаю над проектом, в котором внешний интерфейс встроен в реакцию и бэкэнд весной, и я не могу соединить их с помощью axios.
Имейте в виду, что бэкенд работает правильно (также я не очень хорошо реагирую).
это ошибка, которую я получаю в консоли:
AxiosError {сообщение: "Ошибка сети", имя: "AxiosError", код: "ERR_NETWORK", конфигурация: {…}, запрос: XMLHttpRequest, …}
код: "ERR_NETWORK"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
сообщение: "Ошибка сети"
имя: "AxiosError"
запрос: XMLHttpRequest {данные: не определено, onreadystatechange: null, readyState: 4, время ожидания: 0, withCredentials: false, …}
ответ: XMLHttpRequest {данные: не определено, onreadystatechange: null, readyState: 4, время ожидания: 0, withCredentials: false, …}
[[Прототип]]: ошибка
это мой 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")
Кажется, вы используете запрос 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); } }
Если вы примеряете локалку, корс значения не имеет. Вам необходимо убедиться, что вы указываете правильный 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)
Хотя вы можете проверить свое соединение без настройки cors, поэтому я сказал, что это не имеет значения в локальном режиме.
Вы также можете отправить что-то от почтальона, используя локальный без корса, и это будет работать, поэтому, пожалуйста, удалите «мой ответ бесполезен».
Нет, вы не можете протестировать локальную или любую другую среду без корса, не отключив ее в первую очередь. Кроме того, функциональность cors не работает в таких клиентах, как Postman, Insomnia, HTTPie или curl, просто потому, что это защитная мера, которую БРАУЗЕРЫ используют при работе с разными доменами (вы можете видеть отправленные заголовки, но это практически бесполезно на клиентов, которых я упомянул). Я не буду удалять метку «мой ответ бесполезен» в соответствии с тем, что я сказал выше, и поскольку ответ на вопрос не коррелирует с cors, это проблема с использованием https без настройки ssl.
Похоже на ошибку cors