设置了代理，但是没起效'/api': 'http://localhost:8081'

Question

设置了代理，但是不会跳到代理的那个端口，重新启动了服务也不行。

改成这样也不行'/api/': 'http://localhost:8081/'

Answer 1

fishenal 2017-04-05 22:06:52

apiServer.use('/api', apiRouter);

//apiServer.use(apiRouter)

这样。

因为那个代理，指的是api下面到， localhost：8081/api/接口名

你现在的json server启的是 localhost:8081/接口名

两边要对一下。

为什么要加api那一层，因为proxy只用配一次就行了，否则要配

'/getNewList': 'http://localhost:8081'

.....

加了api这一层，json server就也要加 api这一层

• 提问者 chyco #1

  谢谢老师！

• jasonlbw #2

  为什么还是不行呀老师，代理不过去。

• jasonlbw #3

  我请求8081完全正常，但是/api完全不行。

点开查看后面1条评论

Answer 2

fishenal 2017-04-05 10:31:24

8081启动了吗

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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('./db.json', 'utf8', function (err, data) {     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(port + 1, function (err) {   if (err) {     console.log(err)     return   }   console.log('Listening at http://localhost:' + (port + 1) + '\n') })

8081也要/api前缀，  你的这种设置写的没问题，是 localhost:8080/api/xxx 映射到 localhost:8081/api/xxx

单独访问8081可以吗， 请求方法对不对，POST还是GET

Answer 3

提问者 chyco 2017-04-05 14:31:32

老师您好！我的代码跟你有点不一样，我只跟着你的视频做到了第4分钟。

1.dev-server..js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

require('./check-versions')()   var config = require('../config') if (!process.env.NODE_ENV) {   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) }   var opn = require('opn') var path = require('path') var express = require('express') var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') var webpackConfig = require('./webpack.dev.conf')   // default port where dev server listens for incoming traffic var port = process.env.PORT || config.dev.port // automatically open browser, if not set will be false var autoOpenBrowser = !!config.dev.autoOpenBrowser // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware var proxyTable = config.dev.proxyTable   var app = express() var compiler = webpack(webpackConfig)   var devMiddleware = require('webpack-dev-middleware')(compiler, {   publicPath: webpackConfig.output.publicPath,   quiet: true })   var hotMiddleware = require('webpack-hot-middleware')(compiler, {   log: () => {} }) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) {   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {     hotMiddleware.publish({ action: 'reload' })     cb()   }) })   // proxy api requests Object.keys(proxyTable).forEach(function (context) {   var options = proxyTable[context]   if (typeof options === 'string') {     options = { target: options }   }   app.use(proxyMiddleware(options.filter || context, options)) })   // handle fallback for HTML5 history API app.use(require('connect-history-api-fallback')())   // serve webpack bundle output app.use(devMiddleware)   // enable hot-reload and state-preserving // compilation error display app.use(hotMiddleware)   // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static'))   // 我新增的代码 const jsonServer = require('json-server') const apiServer = jsonServer.create() const apiRouter = jsonServer.router('db.json') const middlewares = jsonServer.defaults()   apiServer.use(middlewares) //apiServer.use('/api', apiRouter); apiServer.use(apiRouter) apiServer.listen(port + 1, () => {   console.log('JSON Server is running') })     var uri = 'http://localhost:' + port   var _resolve var readyPromise = new Promise(resolve => {   _resolve = resolve })   console.log('> Starting dev server...') devMiddleware.waitUntilValid(() => {   console.log('> Listening at ' + uri + '\n')   // when env is testing, don't need open it   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {     opn(uri)   }   _resolve() })   var server = app.listen(port)   module.exports = {   ready: readyPromise,   close: () => {     server.close()   } }

2.index.js

1 2 3 4 5 6 7 8 9

dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: {         '/api': 'http://localhost:8081'     }

3.index.vue

1 2 3 4 5 6 7 8 9

created: function (){             this.$http.get('api/getNewsList').then(function(data){                 console.log(data)             }, function(error){                 console.log(error)             })         },                   //我这里用了get(),但是我改用post()一样不行

4.直接访问8081没问题