axios 不发起 POST 请求

Question

我正在使用 webdriverIO 版本 7 和 axios 来尝试通过 API 登录，而不是使用 UI。
这是我的代码：

getAuthToken({ email, password }) {

    // axios
    //   .post('https://my-app.com/login', {
    //     j_username: email,
    //     j_password: password,
    //     CSRFToken: 'some-token',
    //   })
    //   .then((response) => {
    //     console.log('XXX');
    //     console.log(response);
    //   });

    const data = {
      j_username: email,
      j_password: password,
      CSRFToken: 'some-token',
    };
    axios({
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url: 'https://my-app.com/login',
    }).then((response) => {
      console.log('XXX');
      console.log(response);
    });
  }  

我正在尝试以上述两种方式执行此操作，但我没有在控制台中打印任何响应。
我尝试通过 Postman 发出请求，它工作正常。

此外，我正在通过 Fiddler Everywhere 应用程序监控网站上的流量，当执行此方法时，Fiddler 中不会显示任何内容。
另一方面，当我通过 Postman 执行此操作时，Fiddler 会抓住它。

这是原始邮递员请求数据：

POST https://my-app.com/j_spring_security_check HTTP/1.1
User-Agent: PostmanRuntime/7.28.0
Accept: */*
Cache-Control: no-cache
Postman-Token: 39311680-b11c-4a65-8ff7-2f03b97bf5eb
Host: my-app.com
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Type: multipart/form-data; boundary=--------------------------619522728182415185770824
Cookie: anonymous-consents=%5B%5D; cookie-notification=NOT_ACCEPTED
Content-Length: 436

----------------------------619522728182415185770824
Content-Disposition: form-data; name="j_username"

email@test.com
----------------------------619522728182415185770824
Content-Disposition: form-data; name="j_password"

123456
----------------------------619522728182415185770824
Content-Disposition: form-data; name="CSRFToken"

some-token
----------------------------619522728182415185770824--

这是我通过 Chrome 执行的原始请求

POST https://my-app.com/j_spring_security_check HTTP/1.1
Host: my-app.com
Connection: keep-alive
Content-Length: 90
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
Origin: https://my-app.com
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: https://my-app.com/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=some_id; dtCookie=some_data; anonymous-consents=%5B%5D; cookie-notification=NOT_ACCEPTED

j_username=ecx%40test.com&j_password=123456&CSRFToken=some_token

我做错了什么？为什么它在通过 axios 执行时从不记录响应？
谢谢！

Answer 1

函数编写正确。 邮递员还传递了您可以查看的其他详细信息。 让我们考虑一下可能导致 API 调用失败的场景：

1. 您的函数可能不正确。
2. API 配置不正确。
3. 网络中的问题。

处理第一个场景：

1. 检查函数 getAuthtoken() 是否被调用。
2. 您可能需要修复 CORS 问题。
3. 当您发送 JSON 数据时，服务器端也必须接受 JSON 数据，或者在请求标头中指定它。喜欢

const data = {"name":"Example"}
axios.post('https://linkToApI.com', {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'some_auth_method_like_authToken',
        specify other necessary headers
    },
    data
})     

进入第二个场景： 配置服务器很重要。 确保没有任何阻碍的cors问题。 确保服务器正在接受您发送的请求数据。 确保如果请求失败，它会发送错误响应。

出于调试目的对代码进行的其他更改： 无论您使用什么代码，请尝试添加一个 catch 块，就好像 promise 失败了，我们可以得到错误消息，为什么它会失败。下面是例子：

axios({
      method: 'POST',
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
      data: qs.stringify(data),
      url: 'https://my-app.com/login',
    }).then((response) => {
      console.log('XXX');
      console.log(response);
    }).catch(e=>{console.log(e)}); // this will provide you with info why is it failing