Vue vue.config.js proxy 404

Question

I am following the tutorial from Vue JS 2 Tutorial #32 - HTTP Requests with vue-resource to jsonplaceholder.typicode.com. If I don't proxy it, it'll give out CORS error.

vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://jsonplaceholder.typicode.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

HTTP post request:

this.$http.post('/api/posts', {
    userId: 1,
    title: this.blog.title,
    body: this.blog.content,
}).then(function (data) {
  console.log(data)
});

Error:

XHR POST http://localhost:8080/api/posts [HTTP/1.1 404 Not Found 3ms]

I have tried:

• Vue.js - proxy in vue.config.js is being ignored

• https://cli.vuejs.org/config/#devserver-proxy

• Vue proxy setting does not work

• with axios, and with vue-resource

Edits:

• Changed '/api/post' to '/api/posts', still not working.

• Tried changing '/api/posts' to 'https://jsonplaceholder.typicode.com/posts' which resulted in CORS error.

• Added pathRewrite: { '^/api': '' } into vue.config.json proxy, still not working.

• Tried Proxy changeOrigin setting doesn't seem to work, still not working.

Answer 1

I see your request if going to your localhost instead of the actual server that you want to hit, have you tried changing this.$http.post('/api/post', { to this.$http.post('https://jsonplaceholder.typicode.com/api/post', {

For what I can see on vuecli's documentation the fact that you proxy the server doesn't mean that you need to stop writing the URL of that server on your requests.

Answer 2

Try restart your dev server. A full restart is required to apply the changes.