如何修复从axios响应中收到的网络错误（Reactjs）

Question

在用户登录后，我正在使用ReactJS中的axios进行POST请求。下面是代码:

axios.post('https://localhost:3000/api/login/authentication', {
  email: email,
  password: password
})
.then(response => {
  this.props.history.push('/Main')
})
.catch(error => {
  console.log(error)
})

出现了错误，我将其记录在控制台上。以下是我的输出结果：

Error: "Network Error" createErrorhttp://localhost:3000/static/js/0.chunk.js:26742:15 handleErrorhttp://localhost:3000/static/js/0.chunk.js:26293:14

如果有帮助的话，还有一个警告信息在错误之前：

Cross-Origin Request Blocked：同源策略禁止读取远程资源 https://localhost:3000/api/login/authentication。（原因：CORS请求未成功）

请问有人可以帮我解决这个问题吗？提前感谢！

- tee

---

为什么你在本地使用 https？在使用 https 之前，你需要设置证书。查看这篇文章。 - Dinesh Pandiyan

此外，CORS 是需要从服务器端设置的头信息。虽然如果 localhost 抛出了 CORS 错误，那么可能是 API 服务器运行在与发送页面的服务器不同的端口上，或者 URL 必须使用 https。 - Dinesh Pandiyan

此外，这个问题和示例看起来非常类似于reactjs使用axios进行https（而不是http）请求，尽管提问者不同。 - Dinesh Pandiyan

Answer 1

如果您正在使用前端应用程序向后端API发送请求，则需要在API服务器中包含某些标头，如果API服务器在不同端口上运行。

例如，如果您使用ReactJS应用程序以webpack开发模式提供服务，那么webpack充当服务器，将ReactJS应用程序发送到客户端。然后，对API服务器进行请求需要在所有http响应中包括Access-Control-Allow-Origin标头，该服务器在不同端口上运行。

基本上，在生成每个响应之前，您需要将' Access-Control-Allow-Origin '设置为localhost：浏览器中访问的<端口>。

在基本的express app中，您可以将以下内容粘贴到您的app.js文件中，例如:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});

注意：如果您需要更改http://localhost:3001以匹配您在浏览器中访问的端口。

编辑：OP没有使用express，而是使用Webpack。问题是：什么是与express无关的解决方案？

答案：解决方案仍然相同：无论您使用哪个API服务器，只需为每个响应设置响应标头即可。

还有另一种涉及Webpack的解决方案：

在使用webpack提供的前端代码的 package.json 文件中添加以下内容：“proxy”：“http：// localhost：<port API server is running on>” 例如，如果webpack将您的前端应用程序提供给 localhost：3000 ，并且您的api服务器正在运行 localhost：3001 ，则 package.json 中的代理将是： “proxy”：“http：// localhost：3001”

- Wilfred Tannr Allard

---

谢谢您的评论。我的应用程序不是express。但我确实使用webpack。您能否提供一个使用webpack的解决方案？ - tee

更新了我的回答，提供了一个特定于webpack的解决方案以及一个与API服务器无关的方法。 - Wilfred Tannr Allard

我已经在我的package.json文件中设置了代理，但是在哪里可以设置响应的headers？ - tee

在你的 API 服务器代码中，你有仓库吗？如果有的话，我可以克隆它并向你展示我的意思。 - Wilfred Tannr Allard

我有一个代码库，但由于安全原因它是私有的，不能分享。谢谢你的回答，我会进一步研究并尝试找出代码应该放在哪里。 - tee

Answer 2

1. 我在您的代码中首先发现的问题是，您正在使用“https”，但应该只使用“http”来进行请求，因为本地主机使用http。

2)这可能是由于跨域资源共享（CORS）引起的，在进行任何请求之前，浏览器会向API服务器发送一个预检请求，以了解“此网站是否被允许访问您的资源”，因此使用CORS并指定可以访问API资源的来源将解决此问题。

- DIPIKESH KUMAR

Answer 3

你可以在webpack dev服务器的配置中添加CORS头，具体如下：

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': '*',
},

这将在您的响应中添加这两个标头。因此解决了您的问题。但是，当您的服务运行在与您的本地计算机不同的服务器上时，这些标头需要添加到服务器响应中。

- Peter

---

我在哪里可以找到webpack dev server的配置文件？我在node_modules文件夹中找到了webpack-dev-server文件夹。我走对了吗？ - tee

@tee 创建一个名为 webpack.config.js 的文件，安装 webpack-dev-server 并在 npm start 脚本中传递该文件。我觉得你需要先了解一下 webpack。 - Peter

是的，我对 ReactJS 还比较新。我已经安装了 webpack-dev-server，但您能向我展示我的 webpack.config.js 文件应该是什么样子以及我应该如何调用它吗？ - tee

@tee Stack不是用来寻求代码/解决方案的平台，而是用于讨论技术问题的。您需要学习基础知识，然后进入开发领域。请阅读StackOverflow的使用政策。 - Peter

Answer 4

只是一个想法，可能会对你有所帮助。我在从React UI访问newroutes API端点时遇到了相同的“网络错误”问题，在将newroutes定义移动到api路由之后（在node API服务器中），问题得到解决，如下：

var app = express();
var api = require('./api')
var newRoutes = require('./services/newRoutes/default');

api({ app: app });
**app.use('/newroutes/list', newRoutes);**

- ShivarajRH

Answer 5

我之所以出现这个错误，是因为我在 app.js（主文件）中使用了错误的结构。

错误是由以下操作引起的：

app.use('/api/v1',user)

export const instance = new Razorpay({
    key_id : "*******",
    key_secret : "******"
})

通过这样做，移除了错误：

export const instance = new Razorpay({
    key_id : "********",
    key_secret : "********"
})

app.use('/api/v1',user)

1. • 原因是始终试图采用结构化方法。
2. • 始终查看您放置的内容，时间需要其他数据，例如上面的示例。 该特定路线在某个位置需要razorpay实例信息， 因此将秘密放在顶部，然后是路由，否则错误将出现在您的空间前面。

- Sarbkalyan Singh