使用axios发布请求时出现网络错误

Question

当试图使用axios发布http请求时，我会得到以下错误：

Network Error
- node_modules/axios/lib/core/createError.js:16:24 in createError
- node_modules/axios/lib/adapters/xhr.js:81:25 in handleError
- ... 9 more stack frames from framework internals

我尝试在http://localhost:8080中将“proxy”=“http://myip:8080”替换为"http://myip:8080"，但错误仍然存在。我还尝试使用fetch命令f react本机，但它也给出了相同的错误。

package.json是：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "expo": "^35.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.7.9",
    "morgan": "^1.9.1",
    "nodemon": "^1.19.4",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-router-flux": "^4.0.6",
    "react-native-web": "^0.11.7",
    "react-router-dom": "^5.1.2",
    "spectre.css": "^0.5.8"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0",
    "concurrently": "^5.0.0"
  },
  "private": true,
  "proxy": "http://localhost:8080"
}

server.js是：

const express = require('express')
const bodyParser = require('body-parser')
const morgan = require('morgan')
const app = express()
const PORT = 8080

// MIDDLEWARE
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
//routing
app.post('/', (req, res, next)=> {
    console.log('server post username: ');
    console.log(req.body.username)
    res.end()
})

// Starting Server 
app.listen(PORT, () => {
    console.log(`App listening on PORT: ${PORT}`)
})

axios的代码片段是：

axios.post('/', {
            username: this.state.username,
            password: this.state.password
        })
            .then(response => {
                console.log(response)
                if (response.data) {
                    console.log('successful signup')
                    this.setState({
                        redirectTo: '/login'
                    })
                } else {
                        console.log('Sign-up error');

                    }
            }).catch(error => {
                console.log('Sign up server error: ')
                console.log(error);
            })

执行上述代码的输出是：

Sign up server error: 

Network Error
- node_modules/axios/lib/core/createError.js:16:24 in createError
- node_modules/axios/lib/adapters/xhr.js:81:25 in handleError
- ... 9 more stack frames from framework internals

Answer 1

问题解决了，我使用了hostname --ip-address给出的错误IP(172.0.0.1)。使用ip addr show提供的inet可以工作。

Answer 2

首先，我建议您也使用不同的路由命名空间，而不是使用app.post('/') try app.post(/api`)，其次，您没有向客户端发送任何数据或任何状态代码。尝试以下几个方面：

app.post('/api/post', (req, res, next)=> {
    console.log('server post username: ');
    console.log(req.body.username)
    return res.status(200).send({redirectTo: '/login'});
 })

和公理

 axios.post('/api/post', {
     username: this.state.username,
     password: this.state.password
 })
 .then(response => {
       console.log('successful signup')
       this.setState({
            redirectTo: '/login'
       })

 }).catch(error => {
       console.log('Sign up server error: ')
       console.log(error);
 })

另外，我建议您使用cors库来处理跨源请求。从npm (或纱线或其他)下载

而不是

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

使用这个

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

Answer 3

这对我来说很管用：

sudo ufw allow *your server api port here*