Axios从react发布到Express代理服务器

vkc1a9a2  于 2022-11-23  发布在  iOS
关注(0)|答案(1)|浏览(192)

我创建了一个express服务器,在其中实现了graphQL请求。

const express = require("express"),
app = express(),
port = process.env.PORT || 4000,
cors = require("cors");

var axios = require('axios');
var data = JSON.stringify({
  query: `mutation claimTask ($taskId: String!, $assignee: String) {
    claimTask (taskId: $taskId, assignee: $assignee) {
        id
        name
        taskDefinitionId
        processName
        creationTime
        completionTime
        assignee
        variables {
            id
            name
            value
            previewValue
            isValueTruncated
        }
        taskState
        sortValues
        isFirst
        formKey
        processDefinitionId
        candidateGroups
    }
}`,
  variables: {"taskId":"22","assignee":"demo"}
});

var config = {
  method: 'post',
  url: 'http://[my_ip]/graphql',
  headers: { 
    'Authorization': 'Bearer ey....', 
    'Content-Type': 'application/json', 
    'Cookie': 'TASKLIST-SESSION=..'
  },
  data : data
};

app.use(cors());
app.listen(port, () => console.log("Backend server live on " + port));

app.post("/api", (req, res) => {

  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
    res.send({ message: JSON.stringify(response.data) });
  })
  .catch(function (error) {
    console.log(error);
    res.send({ message: error });
  });

})

现在我从一个react应用程序调用这个请求,它有一个按钮,如下所示:

Axios({
      method: "POST",
      url: "http://localhost:4000/api",
      headers: {
           "Content-Type": "application/json"
    }
    }).then(res => {
      console.log(res.data.message);
    });

下一步,我想从我的react应用程序传递变量,而不是直接将它们写为字符串来表达。实现这一点的正确方法是什么?我使用express服务器来避免cors相关的问题。
任何建议都可能是有用的,谢谢!

8oomwypt

8oomwypt1#

所以你想从react发送一个Axios POST。

const handleSubmit = (e) => {
    e.preventDefault();
    const variables = {
      taskId: ”22”,
      userId: “demo”
    };
    axios.post("http://localhost:4000/api", variables).then((response) => {
      console.log(response.status);
    });
  };

灵感源自https://blog.logrocket.com/understanding-axios-post-requests/

相关问题