로컬 파일로 요청을 가져올 수 없습니다.
로컬 파일로 요청하려고 하는데 컴퓨터에서 언제 하려는지 모르겠어요. 오류 표시해 주세요.프로젝트 내의 파일로 페치가 가능합니까?
// Option 1
componentDidMount() {
fetch('./movies.json')
.then(res => res.json())
.then((data) => {
console.log(data)
});
}
error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// Option 2
componentDidMount() {
fetch('./movies.json', {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then( res => res.json())
.then((data) => {
console.log(data);
});
}
error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 --> .then(res => res.json())
// This works
componentDidMount() {
fetch('https://facebook.github.io/react-native/movies.json')
.then( res => res.json() )
.then( (data) => {
console.log(data)
})
}
다음과 같이 json 파일을 공용 폴더에 저장해 보십시오.
public/public.json
그런 다음 다음을 사용하여 가져오기
fetch('./movies.json')
또는
fetch('movies.json')
전에도 같은 문제를 겪은 적이 있어요.공용 폴더에 json 파일을 넣으면 문제가 해결됩니다.가져오기를 사용할 때 React는 일반적으로 공용 폴더의 자산/자원 파일을 읽습니다.
fetch 명령어를 사용하여 정적 파일을 처리하려고 합니다.이 명령어는 본질적으로 서버에서 파일을 처리해야 합니다.이 문제를 해결하려면 몇 가지 옵션을 사용할 수 있습니다.이러한 경우에 가장 일반적으로 제안되는 두 가지 사항에 대해 간략히 설명하겠습니다.
- 가져오려는 파일에 서비스를 제공하는 자체 서버를 호스트하려면 Node.js와 expressjs를 사용합니다.이 절차에는 더 많은 노력과 시간이 필요할 수 있지만, 확실히 더 커스터마이즈 가능하며 백엔드로부터의 취득 방법을 학습하고 이해하는 데 좋은 방법입니다.
- Chrome Web Server와 같은 기능을 사용하여 로컬 네트워크에서 파일을 처리할 수 있는 매우 간단한 서버를 쉽게 설정할 수 있습니다.이 방법을 사용하면 해당 웹 서버에서 수행할 수 있는 작업을 거의 제어할 수 없지만 웹 응용 프로그램을 빠르고 쉽게 프로토타입으로 만들 수 있습니다.하지만 이 방법을 생산으로 전환할 방법은 없을 것 같습니다.
마지막으로 하나 이상의 파일을 온라인으로 업로드하고 외부 URL에서 가져올 수 있는 다른 옵션이 있지만, 이 방법이 최적의 전략은 아닐 수 있습니다.
서버가 JSON 파일을 제공해야 하므로 Express 서버(또는 기타)가 필요합니다.이 예에서는 express를 사용하고 있습니다.
App.js 파일
import React, { Component } from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
const myHeaders = new Headers({
"Content-Type": "application/json",
Accept: "application/json"
});
fetch("http://localhost:5000/movie", {
headers: myHeaders,
})
.then(response => {
console.log(response);
return response.json();
})
.then(data => {
console.log(data);
this.setState({ data });
});
}
render() {
return <div className="App">{JSON.stringify(this.state.data)}</div>;
}
}
export default App;
server.displaces
var express = require("express");
var data = require('./movie.json'); // your json file path
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get("/movie", function(req, res, next) {
res.send(data);
});
app.listen(5000, () => console.log('Example app listening on port 5000!'))
같은 에러가 발생하고 있어, 에러를 해소하기 위해서 코드를 2개 변경했습니다.첫째, 파일을 처리하기 위해 익스프레스 서버가 필요하지 않습니다. create-react-app 디렉토리의 공용 폴더에 있는 로컬 json 파일에서 데이터를 읽을 수 있습니다.
const getData=()=>{
fetch('data.json',{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then(function(response){
console.log(response)
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
}
useEffect(()=>{
getData()
},[])
먼저 위의 답변 중 몇 가지에서 제시된 바와 같이 json 파일이 공용 폴더 내에 있고 fetch 함수 내의 경로 파라미터가 위와 같이 올바른지 확인합니다.상대적인 길은 나에게 통하지 않았다.다음으로 헤더를 그림과 같이 설정합니다.가져오기 호출에서 헤더 부분을 삭제해도 여전히 이 오류가 발생합니다.
간단한 해결책은 라이브 서버 확장을 사용하는 것입니다(vs 코드를 사용하는 경우).
다음 파일 테스트가 있다고 합니다.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
var depdata;
depdata = fetch("test1.geojson")
.then((data) => {
return data;
});
depdata.then(function(data) {console.log(data)})
</script>
</body>
</html>
file://를 통해 Firefox에 있는 파일에 액세스할 때...다음의 에러가 표시됩니다.
Cross-Origin Request Blocked:....
Firefox의 오류를 추적해보니 다음과 같은 설명이 나왔습니다.
CORS 요구는 HTTPS URL 방식만 사용할 수 있지만 요구에 의해 지정된 URL 유형이 다릅니다.이 문제는 종종 URL이 파일:/// URL을 사용하여 로컬 파일을 지정하는 경우에 발생합니다.
이 문제를 해결하려면 XMLHttpRequest, Fetch API, Web 글꼴(@font-face), WebGL 텍스처 및 XSL 스타일시트 등의 CORS와 관련된 요청을 발행할 때 HTTPS URL을 사용해야 합니다.
따라서 제가 알기론 테스트에 접속하기만 하면 됩니다.html은HTTP이 문제를 가장 쉽게 해결할 수 있는 방법은 python simple http server입니다.터미널에서.
> cd directory of the project.
> python3 -m http.server 8000 --bind 127.0.0.1
그런 다음 브라우저에서 다음을 수행합니다.
http://localhost:8000/test.html
저의 단골 어프로치는 express-generator를 사용하여 퀵 로컬서버를 셋업한 후 ngrok(프리티어)를 실행하여 앱이 작성한 URL을 포인트 하는 것입니다.이를 통해 iOS 시뮬레이터나 Android 에뮬레이터 및 컴퓨터에 연결되어 있지 않은 장치에서 쉽게 페치를 테스트할 수 있는 장점이 있습니다.또한 앱을 테스트하는 사람에게 URL을 보낼 수도 있습니다.물론 앱이 해당 URL을 가져오기 끝점으로 설정할 수 있도록 해당 URL을 수동으로 입력할 수 있는 방법이 필요합니다.
매우 심플한 방법으로 조작할 수 있었습니다.익스프레스/웹서버는 필요 없습니다.다음 작업을 수행합니다.
import data from '../assets/data.json';
json 데이터를 다음과 같이 사용합니다(JsonArray인지 확인).data.map(movie...
에서 이 작업을 수행합니다.App.js또는 다른 클래스를 확장합니다.React.Component,
에러
Unexpected token < in JSON at position 0
는 요청이 실패했을 때 반환되는HTML 파일에서 가져옵니다.HTML 파일의 첫 번째 요소(위치 0)는 일반적으로 '<'입니다.JSON 대신 HTML 파일에서 읽기를 시도합니다.
반환된 HTML 파일은 검사 도구 -> 네트워크 -> 빨간색으로 표시된 오류 파일에서 찾을 수 있습니다.여기서 특정 오류를 확인할 수 있습니다.오류 메시지 예시
오류를 수정하기 위해 Import할 파일을 React 프로젝트의 Public 폴더로 이동한 다음 'src' 폴더의 파일에서 다음과 같이 Import하면 도움이 됩니다.fetch('dataTemplate.json')
공용 폴더에 json 파일을 저장할 수 있습니다.React 구성 요소에서 userEffect()를 사용할 수 있습니다.이 경우 Express.js는 필요 없습니다.
React.useEffect(() => {
fetch("./views/util/cities.json")
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
});
로컬 파일을 가져오려면 다음 방법을 사용하는 것이 좋습니다.
npm install file-fetch
- 파일을 읽으려면:
const fileFetch = require('file-fetch')
fileFetch('./public/user.json').then((res) => {
res.body.pipe(process.stdout)
})
언급URL : https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working
'programing' 카테고리의 다른 글
| React 앱을 서버의 서브 디렉토리에 번들하려면 어떻게 해야 합니까? (0) | 2023.03.04 |
|---|---|
| 이벤트 리스너 동적 추가 (0) | 2023.03.04 |
| woocommerce: 제품 속성에 값 추가 (0) | 2023.02.27 |
| 각도 - 사용자 지정 메서드를 사용하는 $resource 하위 개체 확장 (0) | 2023.02.27 |
| Woocommerce용 ionic 앱에서 PayPal 결제는 어떻게 처리합니까? (0) | 2023.02.27 |