javascript - 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];
}
解决方案
推荐阅读
- google-app-maker - 控制台预览面板 - 如何重置大小?
- android - Android BiometricPrompt DeviceCredentialHandler:onCreate:执行程序和/或回调为空
- tabulator - 有没有办法显示排序箭头的 initalHeaderSortDirection ?
- javascript - 如何使用以前保存的对象以角度反应形式设置默认值?
- java - WebRTC 没有为视频创建 IceCandidates
- python - 在 python 中使用“HUGEBLOB”数据类型
- javascript - POST 表单只需要一个选择标签
- java - 为什么使用非拉丁文本的 Lucene 模糊搜索更容易导致 TooComplexToDeterminizeException?
- parallel-processing - CUDA 中的二元矩阵缩减
- ios - 为什么 PDFKit .beginFindStrings 的结果为零?