title: Axios sending network error while status is 200 ok
body: <p>I'm sending a picture on my node.js express server with this axios query:</p>
  
  <pre><code>axios.post(this.server + 'images',
      formData, {
          crossdomain: true,
          headers: {
              'Content-Type': 'multipart/form-data'
          }
      }
  ).then(function (result) {
      console.log(result);
  })
  .catch(function (error) {
      console.log(error);
  }); 
  </code></pre>
  
  <p>The picture is now on the server, but ,please have a look at this strange behavior i'm seeing inside of the firefox console , it says 'network error', while Axios is receiving a 200 status !:</p>
  
  <p><a href="https://i.stack.imgur.com/hM1mB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hM1mB.jpg" alt="problem"></a></p>
  
  <pre><code>POST http://localhost/images
  [HTTP/1.1 200 OK 20ms]
  
  Error: "Network Error"
      createError createError.js:16
      handleError xhr.js:81
  </code></pre>
  
  <p>This is my node.js backend Cors params  :</p>
  
  <pre><code>const cors = require("cors");
  app.use(
    require("cors")({
      origin: function(origin, callback) {
        callback(null, origin);
      }
    })
  );
  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin); // update to match the domain you will make the request from
    //to allow cross domain requests to send cookie information.
    res.header("Access-Control-Allow-Credentials", true);
    // list of methods that are supported by the server
    res.header("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE");
  
    res.header(
      "Access-Control-Allow-Headers",
      "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, X-XSRF-TOKEN"
    );
  
    next();
  });
  </code></pre>
  
  <p>This a big problem, because I need to be able to Exploit the.then() response, and i can't .</p>
  
  <p>What else should I do ?</p>
  
  <ul>
  <li>My <strong>node server</strong> is started on <strong>localhost:80</strong> </li>
  <li>And my <strong>Webpack-vue.js app</strong> is started on <strong>localhost:8080</strong></li>
  </ul>
  
  <p><em>Note :</em> 
  This is my node function for getting pictures, Please notice that I'm sending a 200 status after the picture gets uploaded :</p>
  
  <pre><code>app.post("/images", upload.single("file"), function(req, res, next) {
  sharp(req.file.path)
      .resize(200, 200)
      .toBuffer(function(err, buffer) {
        fs.writeFile(req.file.path, buffer, function(e) {});
      });
  
    res.sendStatus(200);
  });
  </code></pre>
  
  <p><strong>EDIT</strong> Changed my node server port to 3000 : 
  The problems remains the same :</p>
  
  <pre><code>POST http://localhost:3000/images
  [HTTP/1.1 200 OK 11ms]
  
  Error: "Network Error"
      createError createError.js:16
      handleError xhr.js:81
  </code></pre>
  
  <p>How can I get the result answer ?</p>
  
  <p>I need to get the renamed picture, and can't reach the .then() axios function. </p>
  
  <p>Please have look there :
  <a href="https://i.stack.imgur.com/QqS39.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QqS39.jpg" alt="enter image description here"></a></p>
  
  <p>I'm not able to get the nico.jpg-5454545 inside the axios .then() , it always says 'network error'</p>
  
  <p><strong>EDIT  3 :</strong> 
  Changed my backend params like that with no luck : ( this is the webpack app port)</p>
  
  <pre><code>res.header("Access-Control-Allow-Origin", "http://localhost:8081");
  </code></pre>
  
  <p><strong>EDIT 4 :</strong> 
  Changed my axios query like this with no luck ( This is the node.js server port) :</p>
  
  <pre><code>axios.post(this.server + 'images',
                      formData, {
                        crossdomain: true,
                          headers: {
                              'Content-Type': 'multipart/form-data',
                              'Access-Control-Allow-Origin': "http://localhost:3000"
                          }
                      }
                  ).then(function (e) {
                       if (e){
                      console.log(e);
                     }
                  })
                 .catch(function (err ) {
                     if (err.message === "Network Error"){
                      console.log(err); // Works but nothing gets shown
                     }
  
                  }); 
          },
  </code></pre>
  
  <p><strong>EDIT 5 :</strong> </p>
  
  <p>Tried this code with no luck, I need to access the response data, and only gets ' NETWORK ERROR' </p>
  
  <pre><code> const send = async () =&gt; {
              try {
                  return await  axios.post(this.server + 'images',
                      formData, {
                        crossdomain: true,
                          headers: {
                              'Content-Type': 'multipart/form-data'
                          }
                      }
                  )
              } catch (error) {
                  console.error(error)
              }
              }
  
              const myFilename = send()
              console.log(myFilename);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5wzFv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wzFv.jpg" alt="enter image description here"></a></p>
  
  <p>I'm trying to switch to vue-resource, I really have enough !</p>
  
  <p><strong>Edit 6 :</strong> it seems like it is still a CORS issue :</p>
  
  <p><a href="https://i.stack.imgur.com/QMZui.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QMZui.jpg" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 7 : RESOLVED  !!!</strong> </p>
  
  <p>The problem was that my whole CORS code <strong>was under my app.post("/images" ... function</strong> inside of my app.js on the node.js server . In other words, the cors code needs to stay at the top of the app.js node.js server file.</p>
  
  <p>This is my CORS code now , please notice, it is now BEFORE the images web service :</p>
  
  <pre><code>// ----------------------------------- CORS -------------------------------------------
  
  const cors = require("cors");
  app.use(require("cors")());
  
  app.use(
    cors({
      origin: ["http://localhost:8081", "http://localhost:8081/images"],
      credentials: true
    })
  );
  
  // ----------------------------------- END OF CORS -------------------------------------------
  
  app.post("/images", upload.single("file"), function(req, res, next) {
    console.log(req.file);
  
    sharp(req.file.path)
      .resize(200, 200)
      .toBuffer(function(err, buffer) {
        fs.writeFile(req.file.path, buffer, function(e) {});
      });
    res.send({ filename: req.file.filename });
    // res.sendStatus(200);
  }); 
  </code></pre>
  
  <p>it is working flawless now , No network error no more and i'm getting my filename properly!! 
  <a href="https://i.stack.imgur.com/20sBf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/20sBf.jpg" alt="enter image description here"></a></p>