首页 > 解决方案 > TypeError:部署在 Heroku 上的 Strapi 应用仅支持绝对 URL

问题描述

我有一个 nextjs 应用程序,它带有一个使用 heroku 部署的strapi api,前端是带有 firebase 的。我使用环境变量来获取我的 api。它在 localhost 中运行良好,但不适用于 Heroku。我收到错误:仅支持绝对 URL**

我试图硬编码我的 api URL,但我想这不是最好的解决方案

有人遇到过这种问题吗?

> Build error occurred
TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:64341)
    at /Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65715
    at new Promise (<anonymous>)
    at fetch (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65650)
    at fetchAPI (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:7040:26)
    at getProducts (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:7053:26)
    at getStaticPaths (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:6997:60)
    at buildStaticPaths (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/build/utils.js:17:86)
    at Object.isPageStatic (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/build/utils.js:24:555)
    at execFunction (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/jest-worker/build/workers/processChild.js:155:17) {
  type: 'TypeError'
}

api.js

export function getStrapiURL(path) {
  return `https://intense-beyond-59367.herokuapp.com${path}`;
}

// Helper to make GET requests to Strapi
export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path);
  const response = await fetch(requestUrl);
  const data = await response.json();
  return data;
}

export async function getCategories() {
  const categories = await fetchAPI("/categories");
  return categories;
}

export async function getCategory(slug) {
  const categories = await fetchAPI(`/categories?slug=${slug}`);
  return categories?.[0];
}

export async function getProducts() {
  const products = await fetchAPI("/books");
  return products;
}

export async function getProduct(name) {
  const products = await fetchAPI(`/books?name=${name}`);
  return products?.[0];
}

标签: javascriptherokubuildnext.jsstrapi

解决方案


推荐阅读