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。

问题

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

工具

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

  

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

JavaScript Fetch方法

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代理设置

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

Answer 1

当我将Webpack API代理设置更改为匹配this模式时，我得到了它的工作。我还没有在changeOrigin上找到文档，但它似乎是不言自明的。

更正了Webpack API代理设置

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

我猜测发生的事情是我打电话给改变原点的代理人。由于代理服务器不允许这样做，因此返回301。由于服务器不在那里，它不允许POST个请求。然后代理尝试查看可用的选项，因此它发送了OPTIONS电话。它看到GET被允许并被称为它。 GET试图在我的POST电话下进行处理，但由于格式错误导致405