Question

当我从我的ReactJS前端发送GET请求时，即使我的django后端在终端显示[10/Mar/2018 23:31:08] "GET /post/ HTTP/1.1" 200 930，它也会收到错误。

我正在使用redux传奇。

的src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas'
import rootReducer from './reducers';
import PostsIndex from './components';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" component={PostsIndex}/>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

的src /组件/ index.js

import React, { Component } from 'react';
import { fetchPosts } from '../actions';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import _ from 'lodash';


class PostsIndex extends Component {
  componentDidMount() {
    this.props.fetchPosts();
  }

  renderPosts() {
    return _.map(this.props.posts, (post) => {
      return(
        <li className="list-group-item" key={post.id}>
          {post.text}
        </li>
      )
    })
  }

  render() {
    const { posts } = this.props
    if (posts.isLoading) {
      return (
          <div>
            <h3>Loading...</h3>
          </div>
      )
    } else if (posts.error) {
      return (
        <div>
          <h3>Error getting posts</h3>
          <h2>{JSON.stringify(posts.error)}</h2>
        </div>
      )
    } else {
      return (
        <div>
          <div className="text-xs-right">
            <Link className="btn btn-primary" to="/posts/new">
              Add a Post
            </Link>
          </div>
          <h3>Posts</h3>
          <ul className="list-group">
            {this.renderPosts()}
          </ul>
        </div>
      );
    }
  }
}

function mapStateToProps({ posts }){
  return { posts }
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

的src /动作/ index.js

export const FETCH_POSTS = 'fetch_posts';

export function fetchPosts() {
  return { type: FETCH_POSTS };
}

的src / API / index.js

import axios from 'axios';
const ROOT_URL = 'http://127.0.0.1:8000';

export function fetch(endpoint) {
  return axios.get(`${ROOT_URL}/${endpoint}/`)
            .then(response => ({ response }))
            .catch(error => ({ error }));
}

的src /减速器/ index.js

import { combineReducers } from 'redux';
import { POSTS_REQUESTED, POSTS_RECEIVED, POSTS_REQUEST_FAILED } from '../sagas';
import _ from 'lodash';

function postsReducer(state = {}, action) {
  switch(action.type) {
    case POSTS_REQUESTED:
        return {
            content: null,
            isLoading: true,
            error: null
        }
    case POSTS_RECEIVED:
      return {
          content: _.mapKeys(action.posts, 'id'),
          isLoading: false,
          error: null
      }
    case POSTS_REQUEST_FAILED:
      return {
          content: null,
          isLoading: false,
          error: action.error
      }
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  posts: postsReducer,
});

export default rootReducer;

的src /传奇/ index.js

import { call, put, takeEvery } from 'redux-saga/effects'
import { fetch } from '../api';
import { FETCH_POSTS } from '../actions';

export const POSTS_REQUESTED = 'posts_requested';
export const POSTS_RECEIVED = 'posts_recieved';
export const POSTS_REQUEST_FAILED = 'posts_request_failed';

export function* fetchPosts() {
  yield put({ type: POSTS_REQUESTED })
  const { response, error} = yield call(fetch, 'post');
  if (response)
    yield put({ type: POSTS_RECEIVED, posts: response })
  else
    yield put({ type: POSTS_REQUEST_FAILED, error })
}

export function* watchFetchPosts() {
  yield takeEvery(FETCH_POSTS, fetchPosts);
}

// single entry point to start all Sagas at once
export default function* rootSaga() {
  yield [
    watchFetchPosts()
  ]
}

我得到的输出是

获取帖子时出错 { “配置”：{ “transformRequest”：{}， “transformResponse”：{}， “超时”：0， “xsrfCookieName”： “XSRF-TOKEN”， “xsrfHeaderName”： “X-XSRF-TOKEN”，“maxContentLength “：-1，” 报头 “：{” 接受 “：” 应用/ JSON， text / plain的， / “}，” 方法 “：” 获得”， “URL”： “http://127.0.0.1:8000/post/”}， “请求”：{}}

当我将该网址粘贴到我的浏览器中时，它完美无缺，因此它必须是前端的问题。

为什么我收到此错误？

Answer 1

原来问题与this

有关

由于我使用的是django-rest，我只需要在this answer

中添加django-core-headers到我的后端

即使后端显示200 OK，Reactjs也会收到错误

1 个答案: