Question

我试图在本地文件中提出请求，但我不知道我何时尝试在计算机上显示错误。是否可以获取项目中的文件？

from django.shortcuts import render, render_to_response , get_object_or_404
from .models import Post


# Create your views here.
def index(request):
    posts=Post.objects.all()
    return render(request, 'Index.html', {"posts": posts})

def post(request, slug):
    return render(request, 'post.html', {'post': get_object_or_404(Post, slug=slug)})

Answer 1

您正尝试使用fetch命令提供静态文件，该命令本身要求服务器提供该文件。要解决此问题，您可以使用一些选项。我将概述最常用于此类事情的两个：

使用Node.js和expressjs之类的东西来托管您自己的服务器，该服务器提供您要获取的文件。虽然这个过程可能需要更多的努力和时间，但它肯定更具可定制性，是学习和理解从后端获取的工作方式的好方法。
使用Chrome Web Server之类的内容轻松设置一个非常简单的服务器来为您的本地网络上的文件提供服务。使用此方法，您几乎无法控制使用所述Web服务器可以执行的操作，但您可以快速轻松地对Web应用程序进行原型设计。但是，我怀疑是否有办法将此方法转移到生产中。

最后，还有其他选项可以在线上传一个或多个文件并从外部网址获取，但这可能不是最佳策略。

Answer 2

您的JSON文件需要由服务器提供，因此您需要快速服务器（或任何其他服务器）。在此示例中，我们使用 express 。

注意：您也可以下载git repo

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.js

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!'))

Answer 3

我遇到了相同的错误，我在代码中进行了两项更改以消除该错误。首先，您不需要快递服务器来提供文件，您可以从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函数内的path参数如上所述是正确的。相对路径对我不起作用。其次，如图所示设置标题。从我的提取调用中删除标头部分仍然会给我这个错误。

Answer 4

一个简单的解决方案是使用实时服务器扩展（如果使用vs代码）

Answer 5

我的首选方法是使用express-generator设置快速本地服务器，然后运行ngrok（免费套餐很好）并将应用指向其创建的网址。这样做的好处是可以让您轻松测试iOS模拟器或Android模拟器中的提取，以及未连接到计算机的设备。此外，您还可以将网址发送给测试您的应用的用户。当然，需要有一种方法让他们手动输入该URL，以便app可以将其设置为获取端点。

Answer 6

尝试将您的json文件放置在公用文件夹中，如下所示：

public / movies.json

然后使用

获取

fetch('./movies.json')

或

fetch('movies.json')

我以前也遇到过同样的问题。当我将json文件放在公用文件夹中时，问题解决了。使用提取时，React通常会读取公用文件夹中的资产/资源文件。

Answer 7

说我有以下文件test.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使用file：/// URL指定本地文件，通常会发生这种情况。

要解决此问题，只需确保在发出涉及CORS的请求时使用HTTPS URL，例如XMLHttpRequest，Fetch API，Web字体（@ font-face），WebGL纹理和XSL样式表。

据我所知，我们只需要通过HTTP访问test.html。解决此问题的最直接方法是python简单的http服务器。在终端中。

> cd directory of the project.
> python3 -m http.server 8000 --bind 127.0.0.1

然后在浏览器中：

http://localhost:8000/test.html

Answer 8

您可以将json文件放在公共文件夹中。在您的React组件中，您可以使用userEffect（）。在这种情况下，您不需要Express.js。

React.useEffect(() => { 
   fetch("./views/util/cities.json")
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  });

Answer 9

我以非常简单的方式使它工作-确实不需要express / webserver。只要做：

import data from '../assets/data.json';

并使用这样的json数据（例如，如果它是JsonArray）： data.map(movie ...

在App.js或其他扩展React.Component的类中进行此操作，

Answer 10

错误

Unexpected token < in JSON at position 0

来自请求不成功时返回的 HTML 文件。 HTML 文件的第一个元素（位置 0）通常是“<”。尝试读取 HTML 文件而不是 JSON。

您可以在检查工具 -> 网络 -> 标记为红色的错误文件 -> 响应中找到返回的 HTML 文件。在那里你可以看到具体的错误是什么。 Example Error Message

为了修复我的错误，它有助于将要导入的文件移动到我的 React 项目的公共文件夹中，然后像这样从“src”文件夹中的文件中导入它：fetch('dataTemplate.json')

获取本地文件的请求不起作用

10 个答案: