AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

我正在做一个项目，它的前端是react，后端是spring，但我似乎无法用axios来连接这两者。

请记住，后台是正常工作的（也是我不太擅长react）。

这是我在控制台得到的错误信息。

1. AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

   1. code: "ERR_NETWORK"

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

   3. message: "Network Error"

   4. name: "AxiosError"

   5. request: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}

   6. response: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}

   7. [[Prototype]]: Error

这是我的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 policy/restrictions的限制。理想的情况是选择CORS："Allow"，但你也可以配置它，使请求只接受来自指定的客户端口。

如果你在本地进行尝试，cors并不重要。你需要确保你在后端指向正确的端点网址。

例如，如果你的端点网址在后台是http://localhost:5000/api，而在前台是指向http://localhost:5000/api2，这种错误的拼写会引起axios的'Networ Error'。