Axios 不断向错误的端点发送 GET

Posted 2023-02-23

【中文标题】Axios 不断向错误的端点发送 GET

【英文标题】：Axios keeps sending GET to wrong endpoint

【发布时间】：2018-12-22 01:58:04

【问题描述】：

我将 axios 配置为向在 localhost:8081 运行的快速后端发送请求

src/htpp/index.js

import axios from 'axios'

export default axios.create(
  baseURL: 'http://localhost:8081/api/',
  timeout: 1000,
  headers: 'X-Custom-Header': 'foobar'
)

然后在一个 vue 组件中我发送一个发布请求来发布表单数据

src/components/create-list.vue

import http from '../http'

http.request(
  url: 'lists',
  method: 'post',
  data: 
    displayName: this.displayName,
    listName: this.listName,
    userEmail: this.userEmail
  
)

当我提交表单时，会发送以下请求

请求网址：http://localhost:8080/?list-name=Test&user-email=test%40test.de&user-name=Test

请求方法：GET

我期待

请求网址：http://localhost:8081/api/lists

请求方法：POST

请求正文：“list-name”：“Test”，“user-email”：“test@test.d”，“user-name”：“Test”

我在这里做错了什么？

【问题讨论】：

它对我有用（如果我在同一个脚本中内联 http）。你确定你的进口或其他东西不奇怪吗？你能在你的电话旁边声明 http 看看你是否还在重现这个问题吗？

顺便说一句，这里不要使用 http 作为名称，它是一个原生 Node 对象，它有一个 'request()' 方法。将您的 http 模块命名为其他名称，例如axiosClient 或类似的东西。

好点@ChadMoore

【参考方案1】：

好的，我发现了问题 在我的 vue 组件模板中，一个按钮正在提交我的表单，显然默认行为是发送这个 GET 请求（即使它不是 type="submit" 按钮） 防止默认单击事件或更改应答器以解决问题 仅供参考，我使用的是 Chrome 67.0.3396.99

【讨论】：

需要指出的是<button type="button">submit</button>不提交。

【参考方案2】：

也许您可以尝试像这样导入您的 index.js。确保你的路径是正确的。 还尝试将 http 名称更改为其他名称，例如 Chad Moore 提到的。

import http from '../http/index'

【讨论】：

谢谢，我的导入是正确的。导入一个目录相当于导入其中的 index.js 文件。正如我上面解释的那样，我发现了问题。 Chrome 正在发送表单，但我的请求被忽略了。