6

我正在尝试使用 webpack-dev-server 代理配置将 api 请求发送到外部域，但我似乎无法让它工作。

这是我的配置：

var path = require('path')

module.exports = {
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets'
    },
    devServer: {
        contentBase: 'public',
        proxy:{
            '/api/v1*': {
                target: 'http://laravelandwebpack.demo/',
                secure: false
            }
        }
    }
}

因此，每当我的应用程序使用 uri 发出请求时，/api/v1...它都应该将该请求发送到http://laravelandwebpack.demo.

在我的 Vue 应用程序中，我使用vue-resource发出请求，并且默认所有请求都带有所需的 uri 前缀：

var Vue = require('vue')
Vue.use(require('vue-resource'))

new Vue({
    el: 'body',
    http: {
        root: '/api/v1', // prefix all requests with this
        headers:{
            test: 'testheader'
        }
    },
    ready: function (){
        this.$http({
            url: 'tasks',
            method: 'GET'
        }).then(function (response){
            console.log(response);
        }, function (response){
            console.error(response);
        })
    }
})

URL 的构造正确，但它们仍然指向localhost:8080哪个是 webpack-dev-server：

错误的http请求

我阅读并重新阅读了 webpack-dev-server 的文档，但我无法弄清楚我在哪里设置错误。有任何想法吗？

4

2 回答 2

2

@Linus Borg 是对的。

URL 的构造正确，但它们仍然指向 localhost:8080，它是 webpack-dev-server：

这没关系。

就我而言，我想得到http://m.kugou.com/?json=true. 我正在使用@Vue/cli ^3.0.0-beta.15，也许你需要根据情况修改你的代码。

所以，这就是我所做的：

应用程序.vue

  axios.get('/proxy_api/?json=true').then(data => {
    console.log('data', data)
  })

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // proxy all requests whose path starting with /proxy_api to http://m.kugou.com/proxy_api then remove '/proxy_api' string
      '/proxy_api': {
        target: 'http://m.kugou.com',
        pathRewrite: {
          '^/proxy_api': '/'
        }
      }
    }
    //or just change the origin to http://m.kugou.com
    // proxy: 'http://m.kugou.com'
  }
}

我使用/proxy_api/?json=true然后将其更新为http://m.kugou.com/?json=truebytarget和pathRewrite。

'/proxy_api'用于区分是否应代理 url。

我为什么要使用/proxy_api？易于区分。

我从http://m.kugou.com/?json=truedev-tool 中的 url获取数据http://localhost:8080/proxy_api/?json=true。

看？没关系。

于 2018-06-23T05:49:27.500 回答
1

我找到了解决该问题的解决方案。在我的情况下，我需要将任何/api/*路径的请求代理到我的后端，所以我绕过了任何不以 api 开头的请求。

样本： proxy: { '*': { target: 'http://localhost:8081', secure: false, rewrite: function(req) { console.log('rewriting'); req.url = req.url.replace(/^\/api/, ''); }, bypass: function(req, res, proxyOptions) { if (req.url.indexOf('api') !== 0) { console.log('Skipping proxy for browser request.'); return '/index.html'; }else{ return false; } } } }

于 2016-04-27T13:10:21.947 回答