鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 用最新的vue-cli生成的項(xiàng)目中配置json-server,post請(qǐng)求的話如

用最新的vue-cli生成的項(xiàng)目中配置json-server,post請(qǐng)求的話如何設(shè)置?

要是get請(qǐng)求我是這樣配置,這配置是可以成功的。

clipboard.png

clipboard.png

build文件夾里的文件是這樣的。
clipboard.png

可是我用post請(qǐng)求的話,就會(huì)報(bào)錯(cuò),請(qǐng)問post的配置如何?

回答
編輯回答
陌上花

json-server只能處理get請(qǐng)求,不能處理post請(qǐng)求,參考下面這篇文章可以解決:
http://blog.csdn.net/benben51...

即:
1.config目錄下的index.js,修改dev中的proxyTable為:

proxyTable: {
        '/api/': 'http://localhost:3000/'
    }

2.build目錄下webpack.dev.conf.js文件增加:

// express配置server
var express = require('express')
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName') //接口路徑

.all(function (req, res) {
    fs.readFile('./data.json', 'utf8', function (err, data) {  //讀取接口文件
        console.log(err)
        if (err) throw err
        var data = JSON.parse(data)
        if (data[req.params.apiName]) {
            res.json(data[req.params.apiName])
        } else {
            res.send('no such api name')
        }
    })
})
apiServer.use('/api', apiRouter);
apiServer.listen(3000, function (err) {

if (err) {
    console.log(err)
    return
}
console.log('Listening at http://localhost:' + 3000 + '\n')
})

3.修改build目錄下webpack.dev.conf.js文件中的devServer,增加:

// Invalid Host header問題修復(fù)
disableHostCheck: true

注:data.json是與build同目錄級(jí)別的mock數(shù)據(jù)文件

2017年5月7日 12:54
編輯回答
鐧簞噯

建議koa+mock.js

2018年7月1日 08:26
編輯回答
憶往昔

請(qǐng)問問題你解決了嗎

2018年8月3日 01:09