Question

用户登录后，我正在使用reactios中的axios发出发布请求。在这里：

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: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/api/login/authentication. (Reason: CORS request did not succeed)

有人可以帮我解决这个问题吗？预先感谢！

Answer 1

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

例如，如果您在开发模式下使用webpack服务ReactJS应用程序，则webpack充当服务器，将reactJS应用程序发送到客户端。然后，向API服务器发出请求将要求在其他端口上运行的API服务器在所有http响应中都包含Access-Control-Allow-Origin标头。

基本上，在生成每个响应之前，您需要将'Access-Control-Allow-Origin'设置为localhost:<port you visit in the browser>。

在基本的Express应用中，您可以将其粘贴到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。问题是：什么是快速诊断解决方案？

答案：解决方案仍然相同：无论您使用的是哪种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"

Answer 2

您可以按如下所示在webpack开发服务器配置中添加CORS标头：

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

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

如何解决从axios响应reactjs收到的网络错误

2 个答案: