axios GET 请求与 React JS 中的表单数据

Question

我想使用 axios 在反应 js 中实现以下 cURL 请求（正在工作）：

curl -k --request GET "BASE_URL_SERVER/sendText" --form "user_id="uidxxxx"" --form "sign_id="

我总是得到同样的错误： field sign_id not found ，但从技术上讲，我正在发送它，所以我有点绝望。

var data = new FormData();
data.append('user_id', 'uidxxxx');
data.append('sign_id', '9');

const api = axios.create({
    baseURL: BASE_URL_SERVER,
    data: data,
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    timeout: 10000,
})

api.get('/sendText')
    .then(response => console.log(JSON.stringify(response.data)))
    .catch(error => { console.log(error) })

我也尝试在标题部分添加“...getHeaders()”，但 React 说它不是 function； 我在其他帖子中读到它与浏览器有关

提前致谢

ps： 这是一个非常相似的问题，但没有一个解决方案对我有用

---

[更新] 我最终用 POST 来实现它，这更适合发布表单数据； 不需要标题，浏览器会自动添加它们：

var data = new FormData();
data.append('user_id', user_id);
data.append('sign_id', sign_id);

const api = axios.create({
    baseURL: BASE_URL_SERVER,
    timeout: TIMEOUT_SERVER,
})

api.post('/sendText', data)
    .then(response => console.log(JSON.stringify(response.data)))
    .catch(error => { console.log(error) })

Answer 1

您有一个错误，您尝试通过 axios 发送数据进行 POST 并且方法是 GET...

因此，您需要将方法更改为 POST 以发布表单数据，或者您需要将其更改为 url 参数或 url 路径基于您的 Z8A5DA52ED126447D359E70C0aAZ GET 为...

基于您的 curl，您的情况是您需要一个 GET：

// Make a request for a user with a given ID
axios.get('/sendText?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      sendText: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

此外，您可以将所有配置保存在实例中，并为所有嵌套共享它一次又一次地编写它.. 例如：

// Common Axios Instance Config
const axiosConfig = {
  baseURL: process.env.REACT_APP_API_ENDPOINT,
};

// Create Default Axios Instace
const instance = axios.create(axiosConfig);
 

我认为根据您的示例，这将起作用，但不确定正弦我没有对其进行测试..：

var data = new FormData();
data.append('user_id', 'uidxxxx');
data.append('sign_id', '9');

const api = axios.create({
    baseURL: 'https://193.146.38.4:56076',
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    timeout: 10000,
})

    api.get('/sendText', {
user_id: 111,
sign_id: 2222
)
        .then(response => console.log(JSON.stringify(response.data)))
        .catch(error => { console.log(error) })

有关更多详细信息，请查看此 url