Next.js - 오류: 절대 URL만 지원됩니다.
express를 next.js의 커스텀 서버로 사용하고 있습니다.제품 목록에서 제품을 클릭하면 모든 것이 정상입니다.
순서 1: 제품 링크를 클릭합니다.
2단계: 데이터베이스 내의 제품이 표시됩니다.
, 「」를 는, 「」를 리프레시 합니다./products 이 , 에러입니다.
코드(「」를 해 주세요)/products★★★★★★★★★★★★★★★★★★)
app.prepare()
.then(() => {
const server = express()
// This is the endpoints for products
server.get('/api/products', (req, res, next) => {
// Im using Mongoose to return the data from the database
Product.find({}, (err, products) => {
res.send(products)
})
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})
페이지 - products.js (제품 json 데이터를 루프하는 간단한 레이아웃)
import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
const Products = (props) => (
<Layout>
<h1>List of Products</h1>
<ul>
{ props.products.map((product) => (
<li key={product._id}>{ product.title }</li>
))}
</ul>
</Layout>
)
Products.getInitialProps = async function() {
const res = await fetch('/api/products')
const data = await res.json()
console.log(data)
console.log(`Showed data fetched. Count ${data.length}`)
return {
products: data
}
}
export default Products
기재되어 , 「」, 「」에 를 .fetch만들고 있잖아.코드를 실행할 수 있는 다양한 환경(클라이언트 및 서버)과 관련이 있다고 생각합니다.이 경우 상대 URL은 명확하지 않고 신뢰할 수 없습니다.
한 방법은 를 하드 하는 입니다.fetch 요구, 셋업 , 셋업하다config「CHANGE MARGE:」
/config/index.module
const dev = process.env.NODE_ENV !== 'production';
export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';
products.displays
import { server } from '../config';
// ...
Products.getInitialProps = async function() {
const res = await fetch(`${server}/api/products`)
const data = await res.json()
console.log(data)
console.log(`Showed data fetched. Count ${data.length}`)
return {
products: data
}
}
@Shanker의 답변과 비슷하지만, 추가 패키지를 설치하지 않으려는 경우 다음 방법을 참조하십시오.
async getInitialProps({ req }) {
const protocol = req.headers['x-forwarded-proto'] || 'http'
const baseUrl = req ? `${protocol}://${req.headers.host}` : ''
const res = await fetch(baseUrl + '/api/products')
}
바보같이 들리지만 언급할 가치가 있다.웹 앱에서 SSR를 사용하는 경우 가져오기 호출은 클라이언트의 상대 링크와 함께 작동하지만 서버에서는 실패합니다.서버만 절대 링크가 필요합니다!
서버가 요청을 작성하지 않도록 하려면 논리적으로 정리하면 됩니다.
if(global.window){
const req = fetch('/api/test');
...
}
프로젝트가 프로젝트를 지원하는 공급자에서 호스팅되는 경우 환경 변수를 사용할 수 있습니다.
env.local
// Local
URL="http://localhost:3000"
// Production
URL="https://prod.com"
그런 다음 다음을 사용할 수 있습니다.
const { URL } = process.env;
const data = await fetcher(URL + '/api');
이 심플한 솔루션은 다른 설정 파일을 추가하지 않고도 사용할 수 있었습니다.
설치하다
npm install --save next-absolute-url
사용.
import absoluteUrl from "next-absolute-url";
async getInitialProps({ req }){
const { origin } = absoluteUrl(req, req.headers.host);
console.log('Requested URL ->',origin);
// (or) other way
const host = absoluteUrl(req, req.headers.host);
console.log('Requested URL ->',host.origin);
}
사례 1. 오류가 아닙니다.isomify-unfetch는 SSR 모드로 실행되고 있기 때문에 백엔드는 브라우저 설정을 인식하지 않기 때문에 Node.js에서 가져올 절대 URL을 알아야 합니다.
케이스 2. 다른 시나리오는 http host poisoning 헤더 공격을 방지하는 것입니다.
개인 키와 토큰을 포함하는 링크에 추가합니다.
<a href="http://_SERVER['HOST']?token=topsecret"> (Django, Gallery, others)
...또한 스크립트를 직접 Import할 수도 있습니다.
<script src="http://_SERVER['HOST']/misc/jquery.js?v=1.4.4">
3. 3isomorphic-unfetch데이터를 가져오는 데 사용할 라이브러리입니다.브라우저 가져오기 API의 간단한 구현이지만 클라이언트 및 서버 환경에서 모두 작동합니다.
자세한 내용은 이쪽:
NextJS 9.5에서는,process.cwd().
process.cwd()는 Next.js가 실행되는 디렉토리를 제공합니다.
import path from 'path'
import fs from "fs";
export const getStaticProps: GetStaticProps = async () => {
const dataFilePath = path.join(process.cwd(), "jsonFiles", "data.json");
console.log(dataFilePath); // will be YourProject/jsonFiles/data.json
const fileContents = fs.readFileSync(dataFilePath, "utf8");
const data: TypeOfData[] = JSON.parse(fileContents);
return { props: { data } };
};
참고 자료: https://nextjs.org/docs/basic-features/data-fetching#reading-files-use-processcwd
이것이 구글에 나왔기 때문에, 질문 자체는 실제로 관련성이 없지만(같은 의존성이 다른 이유로 같은 에러 메시지를 발신하고 있다는 사실 이외에는) 내 문제에 대한 결과가 된다.
이 문제는 확인 중에 하드햇을 사용했기 때문에 발생하였습니다).verify:verify) etherscan 계약서입니다.문제는 하드햇 구성에서는 풀모드가 없다는 것입니다.url아래rinkeby(린케비를 검증하고 있었기 때문에 메인넷 등입니다).다른 사람으로부터 복제한 프로젝트에 몇 가지 설정 내용을 빠르게 복사/붙여넣으면, 그 프로젝트에 완전한 URL이 포함되어 있습니다..envurl은 Configuration에 있고 API 키만 저장되어 있는 동안.env.
하지만, 이것을 알아내는 것은 간단했다.node_modules, 그 다음에,node-fetch폴더, 그러면lib(이것은 메모리에서 가져온 것입니다.스택트레이스에서 토해내고 있는 회선을 검색해 주세요)다음으로 회선번호를 입력하고 콘솔로그를 표시하여 표시되는 "불량" URL을 확인합니다.보통은 그걸로 충분합니다.저의 경우 URL이 아닌 API 키였기 때문에 쉽게 해결할 수 있었습니다.
를 가지고 있는 경우absolute패스 문제swr을 사용하여 데이터에 액세스해 보십시오.
주의: 이것은 리액트 후크이므로 컴포넌트 내부에 문의해야 합니다.
import useSWR from 'swr';
// optionally you can use unfetch package from npm or built yours to handle promise.
const fetcher = (...args) => fetch(...args).then(res => res.json())
export const AllProducts = () => {
const { data, error } = useSWR('/api/products', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return (
<div>{data}</div>
);
};
실제 가동 환경에 내보내기 또는 도입
Vercel에 전개하려고 할 때마다 오류가 발생할 수 있습니다.예를 들어 '
warn - Statically exporting a Next.js application via `next export` disables API routes`.
즉, 데이터를 내보내려고 하고 있습니다.NextJS에서 데이터 가져오기를 지원하지 않습니다.pages/api/*디렉토리로 이동합니다.오류를 방지하려면 build 명령과 export 명령을 분리하는 것이 좋습니다.
// package.json
{
"scripts": {
"dev": "next",
"build": "next build", // No next export command
"start": "next start"
},
}
많은 기여를 해주신 분들께 감사드리며, 공유된 답변이 누군가에게 도움이 되기를 바랍니다.
API url의 값을 확인합니다.
저 같은 경우에는요.POST하지만 나의url어느 정도undefined.
사용하다console.log당신의 요청이 어디로 가는지 알아보세요.
에 '있다'를 붙입니다.NEXT_PUBLIC_여기서 설명한 바와 같이 환경변수를 브라우저에 노출합니다.
이것은, 에러를 수신하지 않고, 외부 엔드 포인트에서 데이터를 취득하기 위한 베이스 호스트명을 취득하는 방법입니다.
function return_url(context) {
if (process.env.NODE_ENV === "production") {
return `https://${context.req.rawHeaders[1]}`;
} else if (process.env.NODE_ENV !== "production") {
return "http://localhost:3000";
}
}
사용하는 getServerSideProps 또는 getStaticProps 함수에 대해 설명합니다.
export async function getServerSideProps(context) {
let url = return_url(context);
const data = await fetch(`${url}/yourEndPoint`).then((res) => res.json());
return {
props: {
data: data,
},
};
}
사용방법: 대신 NEXT_PUBLIC_STRAPI_URL="http://localhost:1337"
NEXT_PUBLIC_STRAPI_URL=localhost:1337
nock 뒤에 .log(console.log)를 사용하기 때문에 완전히 일치하지 않는 예상 URL을 얻을 수 있습니다.예:
nock("http://localhost")
.log(console.log)
.persist()
.get("/api/config")
.reply(200, { data: 1234 })
언급URL : https://stackoverflow.com/questions/44342226/next-js-error-only-absolute-urls-are-supported
'programing' 카테고리의 다른 글
| AngularJS가 약속하는 콜백은 Jasmine에서 트리거되지 않음JS 테스트 (0) | 2023.02.20 |
|---|---|
| jsfiddle의 js를 디버깅하는 방법 (0) | 2023.02.20 |
| React 확인란이 onChange를 전송하지 않음 (0) | 2023.02.20 |
| JSON 문자열의 이진 데이터.Base64보다 뛰어난 기능 (0) | 2023.02.20 |
| Angular.js에서 다른 사람에게 주입할 수 있는 "물건"은 무엇입니까? (0) | 2023.02.20 |