Why does the axios.post return POST 404 (Not Found

2020-04-18 05:43发布

问题:

I'm trying to implement a Vue method called "newKweet" which involves axios, whose purpose is to post a new JSON object to the existing JSON file.

When this method is called, it returns the error POST http://localhost:8080/feed.json 404 (Not Found), which implies that I'm trying to reach a destination that doesn't exist.

But I find it weird, because when I call axios.get for the same address it works perfectly fine and it retrieves the JSON data stored in the file feed.json.

Can anybody tell me why this is happening, and how to fix it?

The following is how the newKweet() method is defined.

newKweet(){
  var self = this;
  alert(self.kweetInput); 

  this.axios.post('/feed.json', {
          avatar: self.userJSON.avatar,
          username: self.userJSON.username,
          handle: self.userJSON.handle,
          timestamp: self.userJSON.timestamp,
          content: self.userJSON.content,
          media: {
            type: self.userJSON.media.type,
            url: self.userJSON.media.url
          },
          actions: {
            replies: self.userJSON.actions.replies,
            rekweets: self.userJSON.actions.rekweets,
            likes: self.userJSON.actions.likes
          }  
      })
      .then(function(response){
        console.log('The output: ');
        console.log(response.data);
      })
      .catch(function(error){
        console.log('An error occured...');
        console.log(error);
      });    

      self.kweetInput = '';
      console.log('The end of newKweet() method');
    } 

When I replace the post with get in the code above, it properly gets the JSON data stored in the file, which means that axios itself is working, and the address is correct.

[UPDATE]

[The working directory and its contents]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

[When I open another tab and enter the URL 'http://localhost:8080/feed.json']

[
  {
    "avatar": "/avatar/dankotaru_ketsui.jpeg",
    "username": "安西先生",
    "handle": "@ホッホッホッホ",
    "timestamp": 9031851080000,
    "content": "最後まで希望を捨てちゃいかん。諦めたら、そこで試合終了だよ。…………聞こえんのか?あ?…………私だけかね?まだ勝てると思ってるのは…。",
    "actions": {
      "replies": 35,
      "rekweets": 2700,
      "likes": 5700
    }
  },
  {
    "avatar": "/avatar/makoto_CCO.jfif",
    "username": "誠☆CCO",
    "handle": "@シャアーーーー!!!!",
    "timestamp": 7028851080000,
    "content": "許せカツヲ。胃もたれ的にカレーライスパウダー。ゆうべのロース、売れんかいな!で松屋の天ぷら~のバラけてる身~ね、そう、タラコサラダでビクトーリア☆",
    "actions": {
      "replies": 4,
      "rekweets": 28,
      "likes": 171
    }
  }

.....................
.....................
.....................

]