javascript - 使 Axios post 来自 Gatsby JS 的请求

Question

我正在尝试从组件状态中获取数据，然后将其发送到 REST api。我在 on Submit 函数中创建了 axios post req，但是我知道这在 gatsby 中不起作用。当我从 Gatsby 的 onSubmit 函数发出请求时，我的 res.data 是“这个应用程序最适合使用 Javascript”。我想知道从 Gatsby 发出发布请求的最佳方式是什么，以便我可以从组件的状态传递数据。我一直在考虑使用它作为我的 gatsby-node.js 文件，但是我不确定如何在其中获取组件的状态数据，以便我可以在帖子请求中使用它。谢谢。

onSubmit函数

    //submits answers to backend
   Submit = () => {
    let {answers} = this.state
    axios
      .post("/done", answers)
      .then(res => this.setState({results:res.data,resultsStatus:true}))
      .catch(
        err => console.log(err)
      );
  };

为了触发提交函数，我有一个加载 gif 弹出窗口 4 秒，然后触发提交函数。内容请求是组件返回的jsx

 contentQuest = (
            <div className = 'results-loading'>
            Loading Results!
    <img src={require('./images/loading.gif')} className='results-loading-gif'/>
  </h2>
            </div>
          );
          setTimeout(() => {
            this.Submit()
          },4000)

gatsby-node.js

// You can delete this file if you're not using it
const axios = require('axios');
const crypto = require('crypto');

exports.sourceNodes = async ({ boundActionCreators }) => {
  const { createNode } = boundActionCreators;

  // fetch raw data from the randomuser api
//Here I'm trying to change it to axios.post and grab component's state data
//not sure how to
  const fetchRandomUser = () => axios.get(`https://randomuser.me/api/?results=500`);
  // await for results
  const res = await fetchRandomUser();

  // map into these results and create nodes
  res.data.results.map((user, i) => {
    // Create your node object
    const userNode = {
      // Required fields
      id: `${i}`,
      parent: `__SOURCE__`,
      internal: {
        type: `RandomUser`, // name of the graphQL query --> allRandomUser {}
        // contentDigest will be added just after
        // but it is required
      },
      children: [],

      // Other fields that you want to query with graphQl
      gender: user.gender,
      name: {
        title: user.name.title,
        first: user.name.first,
        last: user.name.last,
      },
      picture: {
        large: user.picture.large,
        medium: user.picture.medium,
        thumbnail: user.picture.thumbnail,
      }
      // etc...
    }

    // Get content digest of node. (Required field)
    const contentDigest = crypto
      .createHash(`md5`)
      .update(JSON.stringify(userNode))
      .digest(`hex`);
    // add it to userNode
    userNode.internal.contentDigest = contentDigest;

    // Create node with the gatsby createNode() API
    createNode(userNode);
  });

  return;
}

编辑:我尝试将我的帖子请求更改为此

fetch('http://localhost:5000/api/done', {
    method: 'POST',
    body: JSON.stringify(answers),
    headers : { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
     }
  }) .then(res => {
      return res.json()})
      .then(res => console.log(res))
      .catch(
        err => {
          console.log(err)}
      );
  };

现在我的控制台中出现了以下消息:

访问“http://localhost:5000/api//done”获取数据'来自原点'http://localhost:8000 ' 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Answer 1

所以事实证明我需要将其包含在我的服务器文件中。

app.use(function(req, res, next) {
  res.header(`Access-Control-Allow-Origin`, `http://localhost:9000`)
  res.header(`Access-Control-Allow-Credentials`, true)
  res.header(
    `Access-Control-Allow-Headers`,
    `Origin, X-Requested-With, Content-Type, Accept`
  )
  next();
});