javascript - 如何将 POST 请求中的数据保存为变量,以便在 GET 请求中使用?

标签 javascript node.js reactjs rest

我正在从 POST 请求接收数据。我想将该数据用作 GET 请求中的变量。用户输入 POST 请求中的数据,以便在第 3 方 API 上进行不同的查询> 如何将数据保存为变量来执行此操作?您可以看到我的 request.body 被保存为 const 数据。我需要它在我的获取请求中用作 ${data} 。我对此很陌生,因此任何有关最佳实践的建议将不胜感激。感谢您的帮助。

Server.js


app.get(`/getmovies`, (req, res) => {

    request(`http://www.omdbapi.com/?t=${data}&apikey=${API_KEY}`,
        function (error, response, body) {
            if (!error && response.statusCode == 200) {
                var parsedBody = JSON.parse(body);
                res.send(parsedBody)

            } else {
                console.log("error in the server")
            }
        }
    )
})


app.post('/postmovie', (request, response) => {
    console.log("I got a request!")
    console.log(request.body);
    const data = request.body;
    response.json({
        status: 'success',
        name: data
    })
})


///Client 

  postMovie = async (e) => {
    e.preventDefault();

    const data = this.state.movie;
    const options = {
      method: 'Post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data)
    };

    const response = await fetch('/postmovie', options);
    const json = await response.json();
    console.log(json);


  };



  getMovies = (e) => {
    e.preventDefault();
    const { movie } = this.state;
    axios.get(`/getmovies`)
      .then(response => this.setState({ movies: response.data }))
      // .then(response => this.setState({ movies: response.data }))
      .catch(err => console.error(err))
  }

  render() {
    const { movie } = this.state;
    return (
      <div>
        <section className="form-container">
          <div className="movie-form-div">


            < form>
              <input className="form-input" type="text" name="name"
                value={movie.name}
                onChange={e => this.setState({ movie: { ...movie, name: e.target.value } })} />
              <button onClick={this.getMovies}>Search</button>
              <button onClick={this.postMovie}>Post</button>

            </form >
          </div>
        </section>



最佳答案

正如我在评论中提到的,您的问题的措辞听起来好像您绝对需要两个请求。

根据评论,OP 已澄清他们不一定需要两个请求,因此在此注释中,您可以尝试以下一些操作。

1) 设置application.conf

Configuration files允许我们参数化和配置应用程序运行所需的变量。您可以在环境(dev/stage/prod 等)和部署之间改变配置文件。

这将假设您的 API_KEY 不会经常更改。将其视为对 api key 进行硬编码,例如

var apiKey = "...."

但这是一种更好、更安全的方式。

在你的情况下,这不会起作用,但最好意识到这一点。您可以使用this package future

2) 获取请求查询参数。

这是您最好的选择

查询参数,顾名思义,允许我们在 get 请求中传入变量来过滤服务器端的结果。这可以是用户 ID、页码等。

您从客户端获取的 URL 看起来像这样

mydomain.com/getmovies?apikey={YourKeyGoesHere}

我相信您在您访问的许多网址中都看到过这个

如果您使用express,您的终点将如下所示。

app.get(`/getmovies`, (req, res) => {
   var apiKey = req.query.apikey
   request(`http://www.omdbapi.com/?t=${data}&apikey=${apikey}`,
      function (error, response, body) {
        if (!error && response.statusCode == 200) {
            var parsedBody = JSON.parse(body);
            res.send(parsedBody)

        } else {
            console.log("error in the server")
        }
    }
)
})

参见How to get GET (query string) variables in Express.js on Node.js?

这将允许您从客户端传递它。

如果您不使用 express 请参阅https://nodejs.org/api/querystring.html

3)如果您绝对需要两个端点...

使用cookie。一旦设置了 cookie,它就会随着每个请求来回传输,直到过期。

查看此How to set cookie in node js using express framework?this

一旦您收到发布请求,您将设置一个 cookie

app.post('/postmovie', (request, response) => {
    response.cookie("apikey", data, maxAge: 900000, httpOnly: true });
    response.json({
      status: 'success'
    })
})

一旦设置了此 cookie,它将与包括 get 在内的所有请求一起传输到客户端并返回。

因此,在您的获​​取请求中,您可以执行以下操作:

app.get(`/getmovies`, (req, res) => {
   var apikey = req.cookies.apikey;
   request(`http://www.omdbapi.com/?t=${data}&apikey=${apikey}`,
      function (error, response, body) {
        if (!error && response.statusCode == 200) {
            var parsedBody = JSON.parse(body);
            res.send(parsedBody)

        } else {
            console.log("error in the server")
        }
    }
)
})

那么 #2 和 #3 有什么区别?

编码在url中的查询参数是公开的,可以被拦截。这对于页码之类的内容来说很好,但如果 API key 是付费 key ,则不太安全。此外,一旦您提交查询,它就会消失(除非您将客户端中的 api key 保存到内存或本地存储),因此用户可能必须重新输入 api key 的所有内容。

另一方面,Cookie 是私有(private)的。我们在代码中设置的 http-only 标志甚至阻止浏览器读取它。只有发布服务器才能看到内容。另外,Cookie 会存储在浏览器中直至过期日期,以便可以在多个请求中重复使用。

选择适合您的一个。

附注我没有测试上面的代码,您可能需要稍微调整一下。答案是让您大致了解这些事情通常是如何处理的

关于javascript - 如何将 POST 请求中的数据保存为变量,以便在 GET 请求中使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60045244/

相关文章:

javascript - React 空状态 - setState 之后 State 保持为 null

javascript - Ember.js - 如何避免手动渲染模板

javascript - Now.js 未捕获类型错误 : Object#<Object>

javascript - 使用 Material UI 时 react 冲突

javascript - 使用 useEffect 清空页面

javascript - 'x' 是什么意思作为 `src` 属性中的最后一个字母

javascript - 单击 javascript 函数时的代码不起作用?

node.js - Npm 安装失败,出现 "cannot run in wd"

node.js - 渲染 View 之前的多个 Mongoose 查询

javascript - 使用redux+react时表达忽略403错误