Question

我正在尝试使用`ReactJS'从django其余框架API中获取数据，但是我仍然遇到相同的错误：

SyntaxError：“ JSON.parse：JSON数据第1行第1列的意外字符”

我认为实际的问题出在我的API中，因为我已经尝试了3种方法将数据导入React。也许有人知道我可以对我的API做些什么来使其正常工作？我正在使用djangorestframework库。该API如下所示：

{
"questions":"http://127.0.0.1:8000/api/questions/?format=json",
"choices":"http://127.0.0.1:8000/api/choices/?format=json"
}

我用来检索数据的React Component如下：

import React, { Component } from 'react';

class ApiFetch extends Component {
  state = {
    data: []
  };

  async componentDidMount() {
    try {
      const res = await fetch('127.0.0.1:8000/api/?format=json');
      const data = await res.json();
      this.setState({
        data
      });
      console.log(this.state.data)  
    } catch (e) {
      console.log(e);  //SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
    }
  }
  
  render() {
    return (
      <div>
        {(this.state.data)}
      </div>
    );
  }
}

export default ApiFetch;

API的标题如下：

allow →GET, HEAD, OPTIONS
content-length →123
content-type →application/json
date →Fri, 17 Aug 2018 11:01:36 GMT
server →WSGIServer/0.2 CPython/3.6.3
vary →Accept, Cookie
x-frame-options →SAMEORIGIN

我在客户端上尝试了以下示例API，并且可以正常工作： https://jsonplaceholder.typicode.com/todos/1

所以关于djangorestframework和我的客户端的某些信息必须不兼容。

Answer 1

解决方案：需要添加跨源资源共享（CORS）

这里的问题是，浏览器根据同源政策阻止Javascript扩展到其他域。

在Django中，默认的解决方法是“ django-cors-headers”。要安装它：

pip install django-cors-headers

然后可以在settings.py

中激活它

写作：

INSTALLED_APPS = (
    ##...
    'corsheaders'
)
MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
    #...
)

CORS_ORIGIN_ALLOW_ALL = True

Answer 2

您似乎没有查询有效的路线，请尝试以下操作：

async componentDidMount() {
    try {
      const res = await fetch('127.0.0.1:8000/api/questions/?format=json');
      const data = await res.json();
      this.setState({
        data
      });
      console.log(this.state.data)  
    } catch (e) {
      console.log(e);  //SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
    }
  }

Django Rest Framework + ReactJS：我的API有什么问题？

2 个答案: