Axios post call 无法按预期工作答案

【问题标题】：Axios post call doesn't work as expectedAxios post call 无法按预期工作
【发布时间】：2018-05-28 03:04:15
【问题描述】：

我正在尝试从我的 SPA 向 Flask 后端进行 POST 调用。我能够从邮递员成功拨打电话，但完全相同的电话在 Axios 上失败。正如我所看到的，它们都生成了一些不同的 cURL 命令。有谁知道这是怎么回事？

以下是我的 Axios 调用方式。

export function login(email, password) {
  return axios.post('www.app.com/login', {
    email, password
  })
};

这是在浏览器网络选项卡中生成的 cURL，它没有按预期工作。

curl 'https://www.myapp.com/login' -H 'Host: somesite.com' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Referer: http://localhost:3000/' -H 'Content-Type: application/json' -H 'Origin: http://localhost:3000' -H 'Connection: keep-alive' --data '{"email":"me@hello.com","password":"hello"}'

这是 Postman 生成的 cURL，它可以工作。

curl -X POST \
  http://www.myapp.com/login \
  -H 'cache-control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -H 'postman-token: c85019e0-55ed-9124-9f46-f006b22e4d56' \
  -F email=hello@hello.com \
  -F password=hello

我可以看到 Postman 调用有一个 -F 选项，这在我的 Axios 调用中不存在。任何帮助表示赞赏。

【问题讨论】：

似乎在您的 Postman 请求中，它正在发送表单数据，但对于 axios 请求，它正在发送 JSON 数据。您应该首先检查您的 Flask 后端是否适用于 JSON。
是的，我认为你是对的。我一定会检查的。有没有办法通过 axios 发送表单数据？
你可以试试这个：github.com/axios/axios/issues/318

标签： javascript curl axios

【解决方案1】：

我在使用 Vue 和 axios POST 到我的 Flask 后端时遇到了类似的问题。

Flask 必须设置 CORS 并将其添加到您的 Flask 应用程序中。 Link to flask extension 我相信用 Postman 发送的 POST 请求不会有 CORS 问题。

安装模块后在 Flask 端启用 CORS。

app = Flask(__name__)
# Enables CORS for all domains on all routes.
cors = CORS(app, resources={r"/*": {"origins": "*"}})

在前端，我有一个处理表单提交的方法。我必须使用 FormData() 对象来包装我想要发送回 Flask 的内容。我还必须将标题设置为：

标题：{'Content-Type': 'application/x-www-form-urlencoded' }}

handleSubmit() {

    var formData = new FormData();
    formData.append('email', this.email);
    formData.append('password', this.password);

    // Vee-validate method to validate the inputs to form.
    this.$validator.validateAll().then((result) => {
      if (result) {

        axios({
          method: 'post',
          url: 'http://localhost:5000/register',
          data: formData,
          config: { headers: {'Content-Type': 'application/x-www-form-urlencoded' }}
          })
          .then((response) => {
            console.log(response);
        })
          .catch(error => {
            console.log(error.response)
          });
      }
      else {
        console.log('Not Valid')
      }
    })

这样做让我可以通过

拉出表单数据

email    = request.form['email']
password = request.form['password']

如果从 axios 发送了错误的请求，并且您尝试从上面的“request.form”中获取密钥。 Flask 将返回 400 错误。请注意这一点。 Flask 400 Bad Request

【讨论】：