如何修复从axios response reactjs收到的网络错误

用户登录后，我在reactjs中使用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)

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

如果您使用的前端应用程序向后端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"

您可以在webpack dev-server配置中添加CORS头，如下所示：

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

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

我在代码中发现的第一件事是，您使用的是"https"，但发出请求时应该仅使用"http"，因为本地主机使用http

2(这可能是由于cors，在做出任何请求之前，浏览器向API服务器发送飞行前请求，以知道"；该网站已被允许访问您的资源或不"；，因此，使用cors并指定可以访问API资源的origin将解决这个问题。

这只是一个想法，可能会对您有所帮助。我也有同样的问题"；"网络错误"；当从react UI访问newroutes API端点时，在将newroutes定义移动到API路由之后(在节点API服务器中(，问题得到了解决，如下所示：

var app = express();
var api = require('./api')
var newRoutes = require('./services/newRoutes/default');
api({ app: app });
**app.use('/newroutes/list', newRoutes);**

我收到这个错误是因为我在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)

- 原因是总是尝试结构化方法
- 总是看看你的推杆需要什么额外的数据，比如上面的一些实例在某个点上的特定路线需要razorpay实例信息，所以这就是为什么把秘密放在首位，然后路由，否则错误就在你的空间前面

相关内容

最新更新

热门标签：