webpack dev server配置反向代理失败

Question

使用webpack dev server配置反向代理失败,我在项目中配置代理失败后,就立马下载了一个新的vue cli来配置,但是还是不行

1. 代理设置(config/index.js)

    proxyTable: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:81',
        changeOrigin: true,
        secure: false
      }
    },

1. 请求

      const options = {
        news_type: 1,
        news_title: '测试',
        news_desc: '1111111111',
        news_url: '',
        images_url: '',
        id: 0
      }
      axios({
        method: 'post',
        url: '/api/news/saveNews',
        data: options
      }).then(res => {
        if (res.data.status === 'success') {
          this.$Message.success('新增成功')
        }
      })

3.结果

Answer 1

要代理到http://xxx.xxx.xxx.xxx/news/saveNews，需要把开头的/api重写为空字符串。

pathRewrite: {
    '^/api': ''
}

Answer 2

proxyTable: {
      '/api'  : {
                target      : 'http://192.168.125.174:81',
                changeOrigin: true,
                pathRewrite : {
                    '^/api': ''
                }
      }
    },