如何使用 Next JS 从外部 api (Heroku) 获取数据?

时间:2021-07-29 11:41:01

标签: api express heroku vercel isomorphic-fetch-api

我目前正在开发一个 Web 应用程序,其服务器和 Web 应用程序分别部署。我已经在 Heroku 上部署了我的服务器和数据库,同时我使用 Vercel 部署了我的 Next JS 应用程序。

我的问题是,当我使用 isomorphic-unfetch 从 Vercel 发出请求时,它会在请求 (https://myapp.vercel.app/myapp.herokuapp.com/) 中添加我的应用程序的地址。我只希望 http://myapp.herokuapp.com 成为请求。

这就是我为它编写代码的方式。

import fetch from 'isomorphic-unfetch'
const host = process.env.API_ENDPOINT -- in this case, it was myapp.herokuapp.com

const myFunction = async(data) => {
  const request = host.concat('/postSomething');
  const res = await fetch(
    request,
    {
      body: JSON.stringify({
        variableA: data.variableA,
        variableB: data.variableB
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    }  
  );
  return await res.json();
}

1 个答案:

答案 0 :(得分:0)

显然,这只是我的 next.config.js 文件中的语法错误。 当我声明 API_ENDPOINT 时,我在“myapp.herokuapp.com”之前包含了“https://”,现在它可以工作了。