反应：Axios 网络错误

Posted 2023-02-22

【中文标题】反应：Axios 网络错误

【英文标题】：React: Axios Network Error

【发布时间】：2018-02-09 08:01:30

【问题描述】：

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

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

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

错误：网络错误 堆栈跟踪： createError@http://localhost:3000/static/js/bundle.js:2188:15 处理错误@http://localhost:3000/static/js/bundle.js:1717:14

【问题讨论】：

您可以使用console.log(error.response.data) 了解更多信息。

查看这个答案，它将帮助您了解错误到底是什么***.com/questions/44806333/…

@FaustoNA error.response 未定义

@ShubhamKhatri 显然 CORS 是问题

太好了，你能弄明白。但是请按照我发布的链接中提到的使用 axios 处理错误

【参考方案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 Documentation on CORS。

【讨论】：

我没有使用 Express。我在 ReactJS 应用程序中使用 Axios。如何在 axios 中使用 CORS？

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

谢谢！，救命。我试图运行一个从我的手机与节点对话的角度应用程序，但它没有工作。即使它在我的电脑上工作。如果节点找不到 CORS “找不到模块”，只需运行 npm install cors。

这个答案也适用于 NestJS，我在客户端遇到了同样的错误，必须将 cors: true 添加到 NestFactory.create。 - ,,,,, app = await NestFactory.create(AppModule, cors: true );

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

【参考方案2】：

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

【讨论】：

我正在使用它，我什至将我的 nodejs 应用程序上传到 heroku

【参考方案3】：

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

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

【参考方案4】：

当您在本地主机上工作并忘记添加 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

【讨论】：

感谢您帮助我 +1

忘记端口使其无法为我工作，这有助于触发这个想法，谢谢！

【参考方案5】：

我在制作数字海滴时遇到了同样的问题。我在 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());

都一样。

【讨论】：

我应该在哪里包括 cors ``` const cors = require('cors'); app.use(cors()); ``` ?

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

我使用了app.use(cors());，尽管它显示网络错误。但不是每次我都收到这个错误。我正在调用用于视频上传的 API。几次调用后，它给我带来了网络错误。

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

是的。已经安装好了。

【参考方案6】：

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

【参考方案7】：

就我而言，它发生在我的互联网连接不稳定时。确保您的互联网连接稳定。

【参考方案8】：

在我的例子中，我使用了“https”而不是“http”，请检查一下。

【参考方案9】：

在我的例子中，我已经在 NodeJs 中设置了上面提到的所有需要​​的配置，但我仍然得到了错误。我在NodeJs中使用端口6000，然后我将其更改为端口5000，问题就解决了。 因此，如果您已完成所有替代方案，只需更改端口即可。

【参考方案10】：

发生这种情况是因为限制原点时跨域策略。浏览器发送飞行前请求以了解 API 服务器想要共享资源的对象。 因此，您必须在 API 服务器中设置来源并发送一些状态。之后浏览器允许将请求发送到 API 服务器。

这是代码。我在 localhost:8000 上运行前端，而 api 服务器在端口 6000 上运行。

const cors = require("cors");

app.options("*", cors( origin: 'http://localhost:8000', optionsSuccessStatus: 200 ));

app.use(cors( origin: "http://localhost:8000", optionsSuccessStatus: 200 ));

我设置了origin作为我的前端url，如果你设置为true，那么它将只允许8000端口访问rosource，而运行在8000端口的前端不能访问该资源。在 api server 中路由之前使用这个中间件。