Question

我正在尝试从我的SPA发送POST到Flask后端。我能够从邮递员成功拨打电话，但完全相同的呼叫失败了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调用中没有。任何帮助表示赞赏。

Answer 1

我遇到了与Vue和axios POST'ing到我的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

Axios post call无法按预期工作

1 个答案: