How can I use proxyTable to make cross origin request in vue-cli?

Question

I want to use proxyTable with axios in my vue-cli project.

In my config/index.js, I put code like this:

proxyTable: {
  '/getnews': {
    target: 'https://xx.xxx.xx.x'
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/getnews': '/getnews'
    }
  }
}

and in my request function, it goes like this:

var url = '/getnews';
  this.$axios({
    methods: 'get',
    url: url,
  })
  .then(response => {
    console.log(response);
  })

Now here comes the question, my browser console tells me that

xhr.js?ec6c:178 GET http://localhost:8080/getnews 504 (Gateway Timeout)

and the terminal says:

Error occurred while trying to proxy request /getnews from localhost:8080 to https://xx.xxx.xx.x (ECONNREFUSED)

so it looks like the proxy doesn't work out, my request still goes to my localhost. Anyone knows how to fix that?

Answer 1

I finally figure out with the help of my friend. It's the lack of port number that causing the problem. The code should be like this:

proxyTable: {
  '/getnews': {
    target: 'https://xx.xxx.xx.x:8080'
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/getnews': '/getnews'
    }
  }
}

Then it works just fine.