设置了代理，但是没起效'/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启动了吗

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

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

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

3.index.vue

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

4.直接访问8081没问题