NEXT.js 获取内部 API 路由

Question

我正在尝试外包 lib/cityData 中的函数fetchCityData，并稍后在不同的组件中使用它。我有一个 next.js 应用程序，我在其中使用 api 路由进行外部 API 调用。所以这有点复杂，但我的老板希望我这样做。让我们从

lib/cityData.js

const fetch = require('cross-fetch');

const fetchCityData = (city) => {  
  const options = {
    method: `POST`,
  };
  fetch(`http://localhost:3000/api/weather?city=${city}`, options)
  .then((response) => {
    if(response.ok){
      return response.json().then(data => console.log(data))
      
    }
      throw new Error('Api is not available') 
    })
  .catch(error => {
    console.error('Error fetching data: ', error)
  })
}
fetchCityData('London')
module.exports.fetchCityData = fetchCityData;

现在我只是想在控制台中测试这段代码。如果我使用，fetch(/api/weather?city=${city})我会得到TypeError: Only Absolute URLs are support。如果我使用完整的 URL 只是为了测试它，我会得到Error fetching data: FetchError: request to http://localhost:3000/api/weather?city=London failed, reason: connect ECONNREFUSED 127.0.0.1:3000. 那是在我将 proxy 添加到 package.json 之后。之前我也拿不到。我还尝试将开发和生产 URL 添加到我的 .env.local 文件中 - 这也没有解决问题。有解决办法吗？

Answer 1

添加服务器和环境解决了问题

const fetch = require("cross-fetch");
const dev = process.env.NODE_ENV !== "production";
const server = dev
  ? "http://localhost:3000"
  : "https://your_deployment.server.com";

const fetchCityData = (city) => {
  const options = {
    method: `POST`,
  };
  fetch(`${server}/api/weather?city=${city}`, options)
    .then((response) => {
      if (response.ok) {
        return response.json().then((data) => console.log(data));
      }
      throw new Error("Api is not available");
    })
    .catch((error) => {
      console.error("Error fetching data in city data: ", error);
    });
};
//fetchCityData('London')
module.exports.fetchCityData = fetchCityData;