VueJS 2 Cli 使用开发服务器将 POST 转换为 GET 请求

Posted 2023-02-22

【中文标题】VueJS 2 Cli 使用开发服务器将 POST 转换为 GET 请求

【英文标题】：VueJS 2 Cli converting POST to GET requests using Dev Server

【发布时间】：2018-08-02 20:02:35

【问题描述】：

问题

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

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

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

问题

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

---

工具

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

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

javascript 获取方法

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"

【问题讨论】：

你用什么库来获取？

我正在使用 polyfill whatwg-fetch github.com/github/fetch 因为我的浏览器本身支持 fetch，所以 polyfill 似乎不是问题。

你在哪里看到网络请求，即截图来自哪里？那些 301 响应的 Location 标头是什么？

嗯，试试url = '/api/login/authenticate 没有尾部斜线。您的服务器可能会将/authenticate/ 解释为目录请求

可能是这样，等我回到办公室试试。

【参考方案1】：

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

更正 Webpack API 代理设置

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

我猜发生的事情是我调用了一个更改来源的代理。由于代理服务器不允许这样做，所以它返回了301。由于服务器不在那里，它不允许POST 请求。然后代理尝试查看可用的选项，因此它发送了一个OPTIONS 调用。它看到GET 被允许并调用它。 GET 试图在我的 POST 调用下进行处理，但由于格式错误而失败，返回了 405