2017-05-24 89 views
0

我正在爲POST餘息API做鬥爭。我嘗試郵遞員,它的作品,但通過代碼我得到錯誤。 因此,我在localhost:3000上運行我的休息api,並在localhost:8080上運行我的反應應用程序。 所以這裏有一個運行的腳本:如何使用jquery進行POST請求?

"scripts": { 
"start": "webpack-dev-server --open", 
"build": "NODE_ENV='production' webpack -p", 
"build:prod": "webpack -p", 
"deploy": "npm run build && firebase deploy", 
"firebase-init": "firebase login && firebase init", 
"server": "nodemon index.js", 
"dev":"concurrently \"npm run start\" \"npm run server\"" 


}, 

,我跑我的應用程序npm run dev。 現在我server.js(在我的情況index.js)看起來是這樣的:

const express = require("express"); 
const routes = require("./routes/api"); 
const bodyParser = require("body-parser"); 
const mongoose = require("mongoose"); 

const app = express(); 

mongoose.connect("mongodb://localhost/blog"); 
mongoose.Promise = global.Promise; 

app.use(express.static("src")); 
app.use(bodyParser.json()); 

app.use("/api", routes); 

app.use(function (err, req, res, next) { 
    res.status(422).send({error: err.message}); 
}); 
var PORT = 3000; 
var allowCrossDomain = function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', "*"); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    next(); 
} 
app.use(allowCrossDomain); 
app.listen(process.env.port || PORT, function() { 
    console.log("Now listening for requests on localhost:"+PORT); 
    console.log(process.env.PORT); 
}) 

和我api.js看起來像

const express = require("express"); 
const router = express.Router(); 
const Post = require("../models/post"); 

router.get("/posts", function (req, res, next) { 
    Post.find({}) 
     .then(function (posts) { 
      res.send(posts); 
     }); 
}); 
router.post("/posts", function (req, res, next) { 
    Post.create(req.body) 
     .then(function (post) { 
      res.send(post); 
     }).catch(next); 
     console.log(req.url); 
}); 
module.exports = router; 

最後我的功能看起來像這樣

handleAdd(){ 
    var dataaa = {"text":"This is my first post!"} 
$.ajax({ 
    type:"POST", 
    url:" http://localhost:3000/api/posts", 
    data: JSON.stringify(dataaa), 
    contentType: 'application/json', 
    success: function(res) { 
     console.log(res); 
     console.log("Added"); 
    }.bind(this), 
    error: function(xhr, status, err) { 
     console.error(url, status, err.toString()); 
    }.bind(this) 
}); 
} 

我得到錯誤http://localhost:3000/api/posts 422 (Unprocessable Entity),我被困在這裏差不多3天... 那麼如何使這兩個端口3000和8080溝通,所以我可以工作也不馬利?誰能幫我?

+0

仍然存在此問題。你能檢查你的網絡端的迴應嗎?那會提供更多的信息。 – collision

回答

0

自己解決。所以錯誤是在我通過的領域

handleAdd(){ 
     var dataaa = {"description":"This is my first post!"} 
    $.ajax({ 
     type:"POST", 
     url:"http://localhost:3000/api/posts/", 
     data: JSON.stringify(dataaa), 
     contentType: 'application/json', 
     success: function(res) { 
      console.log(res); 
      console.log("Added"); 
     }.bind(this), 
     error: function(xhr, status, err) { 
      console.error(xhr, status, err.toString()); 
     }.bind(this) 
    }); 
    } 

這現在的作品!我的dataaa對象不是「文本」字段,而應該有「描述」。我得到url is not defined,因爲有console.error(url, status, err.toString());,應該是console.error(xhr, status, err.toString()); ... xhr而不是url。所以當我更改爲xhr時,我可以擴展,並看到錯誤是當我傳遞字段,並且因爲「description」字段是必需的,所以我得到了該錯誤。只需將「文本」更改爲「說明」即可使用!