VueJS 2 Cli使用Dev Server将POST转换为GET请求

Question

问题

我使用Vue CLI启动了一个新的VueJS项目。我正在使用fetch将POST登录信息发送到远程DEV服务器。当我在我的本地环境中调用此方法时，它将此调用作为GET处理，然后是POST，然后是OPTIONS，然后是GET。

这是我运行POST请求后Chrome显示的网络面板。

当它到达api服务器时，它被作为GET请求处理，返回405，因为它是POST而不是GET。

Question

为什么它在两个301之间弹跳然后将调用转换为GET请求。

---

Tools

我正在使用VueJS 2 CLI，Webpack和Babel

注意：我用假的替换了真正的api url和服务器

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

当我改变Webpack API代理设置以匹配this模式时，我得到了它的工作。我还没有找到关于changeOrigin的文档，但它似乎是自我解释的。

Corrected Webpack API Proxy Setup

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

我猜测发生的事情是我打电话给改变起源的代理人。由于代理服务器不允许这样，所以它返回了301。由于服务器不存在，它不允许POST请求。然后代理尝试查看可用的选项，因此它发送了OPTIONS调用。它看到GET被允许并称之为。 GET试图在我的POST电话下处理它失败，因为格式错误返回了405