無法連接到後端，我的路徑/文件未找到

Question

如何正確配置我的文件？

我想提交一個表單，當我提交它時，我得到一個404錯誤，我的路徑/文件未找到。

確切的錯誤是：

xhr.js:175 POST http://localhost:1337/mail 404 (Not Found) 

我app.js文件是：

var express = require('express'); 
var mail = require('./routes/mail'); 
var app = express(); 

app.use('/mail', mail); 
app.use(express.static('dist')); 
app.use(express.static('dist/img')); 

app.listen(process.env.PORT || 1337); 
console.log('Port 1337 is listening'); 

我在mail.js文件是：

var express = require('express'); 
var mail = express.Router(); 

mail.get('/:name/:email/:phone:/message', function(req, res){ 
    console.log('in function'); 
}); 

console.log('Made it to mail'); 

module.exports = mail; 

發送代碼的功能從一個jsx文件是：

handleClick(e){ 
    const name = this.state.name; 
    const email = this.state.email; 
    const phone = this.state.phone; 
    const message = this.state.message; 
    e.preventDefault(); 
    if(name === "" | email === "" | phone === "" | message === ""){ 
     return; 
    }else{ 
     axios({ 
      method: 'post', 
      url: '/mail', 
      data: {name, email, phone, message} 
     }); 
    } 

} 

標題顯示以下內容：

Request URL:http://localhost:1337/mail 
Request Method:POST 
Status Code:404 Not Found 
Remote Address:[::1]:1337 
Response Headers 
view source 
Connection:keep-alive 
Content-Length:18 
Content-Type:text/html; charset=utf-8 
Date:Mon, 23 Jan 2017 21:17:15 GMT 
X-Content-Type-Options:nosniff 
X-Powered-By:Express 
Request Headers 
view source 
Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Content-Length:85 
Content-Type:application/json;charset=UTF-8 
Host:localhost:1337 
Origin:http://localhost:1337 
Referer:http://localhost:1337/ 
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
Request Payload 
view source 
{name: "Username", email: "user@gmail.com", phone: "1234567891", message: "testing"} 

當我運行一飲而盡，我得到的控制檯消息，它「做了它對郵件」。但是當我提交表單時，它給了我錯誤「POST http://localhost:1337/mail 404（Not Found）」。

我的目錄設置爲：

root/ 
...dist/ (this is where my client.min.js file is where all my front end code is) 
...routes/ 
app.js 

Answer 1

我建議你閱讀如何定義路由Express.js文檔。 還有你似乎並不理解請求主體和URL（你傳遞給愛可信的數據屬性的數據）之間的差值（/郵件/ ...）

您所定義的路由將只捕獲GET REQUESTS但是你在做POST從Axios公司請求，你不必爲POST請求

而且任何路線您已經定義將只趕上例如URL這樣/mail/john/blablamail/blablaphone/blablamessage因爲你做了什麼什麼：

app.use('/mail', mail); 
//... 
mail.get('/:name/:email/:phone/:message',...); 

可以simplyfied這樣：

app.get('/mail/:name/:email/:phone:/message',..); 

你在做什麼是良好的動態URL，你似乎並不需要。 例子是：

// assume url /users/123 
app.get('/users/:id', function(req, res){ 
    console.log(req.params.id); // output = 123 
}); 

你需要什麼，而不是爲POSTapp.post(...);這樣的：

app.post('/mail', function(req, res){ 
    console.log(req.body); 
    // -> {name: "Username", email: "user@gmail.com", phone: "1234567891", message: "testing"} 
}); 

編輯

還有一兩件事。爲了讓req.body成爲js對象，你需要body-parser來解析json數據。具體來說這條線app.use(bodyParser.json())