VueJS 2 Cli converting POST to GET requests using Dev Server

Question

Issue

I started a new VueJS project using the Vue CLI. I'm using fetch to POST login info to a remote DEV server. When I call this method on my local environment it processes this call as a GET then a POST then a OPTIONS then a GET.

This is what the network panel from Chrome shows after I run the POST request.

When it hits the api server it is being processes as a GET request which is returns a 405 as it is a POST not a GET.

Question

Why is it bouncing between two 301s and then converting the call to a GET request.

---

Tools

I'm using VueJS 2 CLI, Webpack, and Babel

Note: I replaced the real api url and server with a fake one

JavaScript Fetch method

authenticate (username, password) {
  const url = '/api/login/authenticate/'
  return fetch(url, {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: new Headers({
      'Content-Type': 'application/json'
    })
  }).then(res => res.json());
}

Webpack API Proxy Setup

proxyTable: {
   "/api": "http://www.myDevServer.net"
}

Answer 1

I got it to work when I changed the Webpack API Proxy Setup to match this pattern. I have not yet found docs on changeOrigin but it seems self explanatory.

Corrected Webpack API Proxy Setup

proxyTable: {
   "/api": {
      target: "http://www.myDevServer.net",
      changeOrigin: true
   }
}

What I'm guessing happened was I called a proxy that changed origin. As the proxy server didn't allow this so it returned a 301. As the server was not there it didn't allow POST requests. Then the proxy tried to see what options were available, so it sent an OPTIONS call. It saw GET was allowed and called it. The GET was trying to process under my POST call and it failed as the format was wrong which returned a 405