React：Axios网络错误

Question

这是我第一次使用 axios，我遇到了一个错误。

  axios.get(
    `http://someurl.com/page1?param1=1&param2=${param2_id}`
  )
  .then(function(response) {
    alert();
  })
  .catch(function(error) {
    console.log(error);
  });

通过正确的URL和参数，当我检查网络请求时，确实从我的服务器得到了正确的答案，但是当我打开控制台时，我发现它没有调用回调函数，而是捕获了一个错误。

Error: Network Error Stack trace: createError@http://localhost:3000/static/js/bundle.js:2188:15 handleError@http://localhost:3000/static/js/bundle.js:1717:14

- Mirakurun

---

你可以尝试使用 console.log(error.response.data) 来获取更多相关信息。 - fnune

看看这个答案，它会帮助你准确地知道错误是什么：https://dev59.com/3KLia4cB1Zd3GeqPrvsI#44806462 - Shubham Khatri

@FaustoNA error.response 是未定义的。 - Mirakurun

@ShubhamKhatri 显然CORS是问题。 - Mirakurun

很棒，你能够解决它。但是请按照我发布的链接中提到的使用axios处理错误。 - Shubham Khatri

@ShubhamKhatri 我还没有成功让它工作。我得到了状态码：0。感谢您提供的错误处理建议。 - Mirakurun

Answer 1

使用NodeJS创建API

---

你的Express应用程序需要使用CORS（跨源资源共享）。将以下内容添加到你的服务器文件中：

// This should already be declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

要更全面地了解CORS，请阅读Mozilla关于CORS的文档。

- jacobhobson

---

我不使用Express，而是在ReactJS应用程序中使用Axios。我该怎么做才能在Axios中使用CORS？ - Ahmed

一个重要的点是在处理请求的代码之前添加cors中间件。 - Deniz Ozger

谢谢！真是救命恩人。我想在手机上运行一个与node通信的angular应用程序，但它无法工作。即使在我的电脑上也可以工作。如果node找不到CORS "module not found"，只需运行npm install cors即可。 - Ramon Araujo

这个答案同样适用于NestJS，在客户端也会出现同样的错误，需要在NestFactory.create中添加{ cors: true }。 app = await NestFactory.create(AppModule, { cors: true }); - Ofir G

我正在使用Django。我该如何解决这个问题？ - Sumit

Answer 2

我遇到的问题是关于所请求的URL。我没有在我的URL开头插入http://。我的意思是，我请求的URL是像92.920.920.920/api/Token这样的URL，而不是http://92.920.920.920/api/Token。添加http://解决了我的问题。

- Mahdieh Shavandi

---

我正在使用它，我甚至将我的Node.js应用上传到Heroku。 - tiedmud

Answer 3

当你在本地主机上工作时，并忘记添加http://时会出现这种情况。

错误用法

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // NETWORK ERROR

正确的是

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "http://localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // WORKS FINE IF YOU HANDLED CORS CORRECTLY IN THE SERVER SIDE

- Samil Kahraman

---

忘记端口导致它对我不起作用，这帮助触发了思考，谢谢！ - Jim

此外，当您在本地主机上使用https时。 - wayne

Answer 4

除了@jacobhobson的回答之外，我还使用了一些参数来使它正常工作。

app.use(cors({origin: true, credentials: true}));

- Tiago Barroso

Answer 5

在我的情况中，我使用了 "https" 而不是 "http"，也要检查一下。

- Amir Mehrnam

---

请在Axios URL中使用https://api.coincap.io/v2/assets而不是api.coincap.io/v2/assets。 - paydarsefat

这正是我的问题，谢谢你提到。 - undefined

Answer 6

我在尝试上传图像到我们的服务器时，使用axios 0.27.2遇到了网络错误。设置以下标头后，不再收到错误信息。

headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"}

你需要检查集合中API请求的body类型，例如它是否为form-data或x-wwww-form-urlencoded等。

- A.A.

Answer 7

我想告诉你，在搜索了两天的解决方案后，我终于解决了我的错误。由于代理是问题的源头，我必须在package.json文件中配置代理，并且在使用Axios的函数中遵循以下指示：

try { await axios.post("user/login", formData).then((res) => { console.log(res.data); }); } catch (error) { console.log(error.response.data.message); }

并且在 package.json 文件中需要添加代理：

"proxy": "http://localhost:6000",

为了更好地理解，请查看此文档：进入链接描述

- Godfather

---

我应该把它添加到哪里？客户端的 package.json 还是服务器的 package.json？ - Gourav Sanyal

@GouravSanyal 这对我来说很有效，只需在客户端的package.json中添加代理。 - undefined

但是我很困惑，当我托管我的网络应用程序时，我需要在托管我的网络应用程序时进行更改吗？ - undefined

Answer 8

我在数字海洋的 droplet 上遇到了同样的问题。我在 ReactJS 中使用 axios 调用 Node.js API。虽然我已经包含了 cors。

const cors = require('cors');
app.use(cors());

但我仍然需要添加

res.header( "Access-Control-Allow-Origin" );

在调用我的控制器之前，我遇到了问题。后来我发现cors没有正常工作。于是我卸载并重新安装它们，问题解决了。

完整的代码在这里。

因此，您可以使用

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
  next();
});

或者使用

app.use(cors());

它们是相同的。

- Hassaan Rana

---

请问我应该在哪里包含CORS？const cors = require('cors'); app.use(cors()); - jhon

你可以在 server.js 中的路由调用之前使用它，或者如果你正在使用一些中间件，那么你可以将这些行放在那里。附注：我也更新了我的答案。 - Hassaan Rana

我使用了 app.use(cors());，但是它显示网络错误。但并不是每次都会出现这个错误。我正在调用一个视频上传的API。在多次调用后，它会抛出网络错误。 - Jayna Tanawala

@JaynaTanawala 你安装了cors吗？尝试运行“npm install cors --save”。 - Hassaan Rana

已安装完毕。 - Jayna Tanawala

Answer 9

请确保在 cors({ origin : [ "http://localhost:3001"]}) 和 .env 文件中具有相同的端口号。

- tejas e

Answer 10

1. 更改您的节点服务器的端口号。 解决此错误花费了超过3个小时。最终的解决方案是将初始设置为6000的端口号更改为3001。然后它就可以工作了。我的服务器本地主机基本URL是：

   "http://localhost:6000/data"

   我在服务器上更改了app.listen()中的端口号，并从前端调用async函数中的GET路由，如下所示：await axios.get('http://localhost:3001/data')。 现在它运行良好。

2. 如果您遇到地址问题：address already in use :::#port

   然后在命令提示符上输入：killall -9 node

- UdayanBKamble

---

你救了我，谢谢。 - ajs.sonawane