怎么在 vue-cli下面实现跨域请求&&webpack 的 dev-server 里面的after和before方法怎么使用？

Question

1、看了webpack 的配置说明，但是不知道怎么使用
2、这是我在index里面做的尝试，

'use strict'
// Template version: 1.2.3
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
var express = require('express')
var app = express()
var axios = require('axios')
var apiRoutes = express.Router()

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: { //跨域。。。代理服务 
          '/api': {
                    target: 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg',
                changeOrigin: true,
                pathRewrite: {
                 '^/api': ''
                }
          }
        },
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8085, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
        autoOpenBrowser: true,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        // Use Eslint Loader?
        // If true, your code will be linted during bundling and
        // linting errors and warnings will be shown in the console.
        useEslint: true,
        // If true, eslint errors and warnings will also be shown in the error overlay
        // in the browser.
        showEslintErrorsInOverlay: false,
    
        /**
         * Source Maps
         */
    
        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'eval-source-map',
    
        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,
    
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false,
        before(apiRoutes) {
          apiRoutes.get('/lyric', function (req, res) {
              var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
              axios.get(url, {
                headers: {
                  referer: 'https://c.y.qq.com/',
                  host: 'c.y.qq.com'
                },
                params: req.query
              }).then((response) => {
                var ret = response.data
                if (typeof ret === 'string') {
                    /* \w:字母、数字、下划线   中间就是以大括号开始，小括号结束且不为（ 、）的字符，一个和多个*/
                  var reg = /^\w+\(({[^()]+})\)$/ /*==> MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\...."})*/
                  var matches = ret.match(reg)
                  if (matches) {
                    ret = JSON.parse(matches[1])
                  }
                }
                res.json(ret)
              }).catch((e) => {
                console.log(e)
              })
            })
        },
        after(apiRoutes){
          apiRoutes.get('/lyric', function (req, res) {
              var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
              axios.get(url, {
                headers: {
                  referer: 'https://c.y.qq.com/',
                  host: 'c.y.qq.com'
                },
                params: req.query
              }).then((response) => {
                var ret = response.data
                if (typeof ret === 'string') {
                    /* \w:字母、数字、下划线   中间就是以大括号开始，小括号结束且不为（ 、）的字符，一个和多个*/
                  var reg = /^\w+\(({[^()]+})\)$/ /*==> MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\...."})*/
                  var matches = ret.match(reg)
                  if (matches) {
                    ret = JSON.parse(matches[1])
                  }
                }
                res.json(ret)
                console.log(res.json(ret))
              }).catch((e) => {
                console.log(e)
              })
            })
        }
      },

3、

    export function getLyric(mid) {
    
      const url = '/api/lyric'
    
      const data = Object.assign({}, commonParams, {
          g_tk: 5381,
        songmid: mid,
        platform: 'yqq',
        hostUin: 0,
        needNewCode: 0,
        categoryId: 10000000,
        pcachetime: +new Date(),
        format: 'json'
      })
    
      return axios.get(url, {
        params: data
      }).then((res) => {
        return Promise.resolve(res.data)
      })
    }

4、找不到目标地址

5、 下面的after和before方法，不知道怎么用,起作用的就只是proxy,Please help me! Thanks very much!

Answer 1

最新的webpck用的不是dev-server而是全部在webpack.dev.conf.js里面进行配置，我和楼主一样碰到过这个问题，楼主可以补全下试试看:

app.use('/api', apiRoutes);
before(apiRoutes){ 
    apiRoutes.get('/api/lyric', function (req, res) {...})
}

Answer 2

感觉上面的全部都没有用最新的vue-cli，就瞎说

Answer 3

404 是指找不到接口，你看下接口地址有么有错

Answer 4

这些配置的东西真的算是个前端的门槛了... 之前没有怎么特意看这块的配置，刚才简单看了下

vue-cli 中 npm run dev 启动的不是 webpack 中的 devServer，所以你这里配置的 before after 肯定没有用。不要混淆了 vue-cli 的配置和 webpack 的配置！

vue-cli 中用的是 http-proxy-middleware，详见 dev-server.js。因此具体 proxy 怎么用，需要看http-proxy-middleware 的文档：https://github.com/chimurai/h...

Answer 5

  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
    noInfo: false,
    compress: true,
    host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true,
    proxy: {
      '*': {
        target: 'http://192.168.1.202',
        changeOrigin: true,
        secure: false
      }
    }
  },

Answer 6

楼主问题解决了麻烦在答案中说明一下，谢谢了

Answer 7

最新的vue-cli，跨域，你应该使用的依然是proxy去进行代理，而webpack配置这里的before和after是为了让webpack-dev-server充当服务器端使用的。

Answer 8

Answer 9

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    /**
     * axios
     */
    before(app) {
      // 获取推荐页面列表
      app.get('/api/getDiscList', function (req, res) {
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })
      // 获取歌词
      app.get('/api/lyric', function (req, res) {
        var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          var ret = response.data
          // 字符串转换成json对象
          if (typeof ret === 'string') {
            var reg = /^\w+\(({[^()]+})\)$/
            var matches = ret.match(reg)
            if (matches) {
              ret = JSON.parse(matches[1])
            }
          }
          res.json(ret)
        }).catch((e) => {
          console.log(e)
        })
      })
    }
  },