React redux 前端不使用 axios 从 Django API 获取数据
React redux frontend not fetching data from Django API with axios
我正在构建一个 Django-React 应用程序(Django API 在其独立服务器上的端口 8000 和 React 前端在其独立服务器上的端口 3000 上)使用 axios 从 Django 服务器获取数据和 Redux 来发送数据。所以,我创建了这样的 redux 操作:
// 获取交易:/action/transactions.js
import axios from 'axios';
import { GET_TRANSACTIONS } from './types';
export const getTransactions = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
}).catch((err) => console.log(err));
};
在 React 视图中从 redux 存储获取数据我有这个:
// 反应视图:
import React, {Component,} from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getTransactions } from '../../../../actions/transactions';
import './transfert.css';
const initialState = {
transactions: [],
};
const propTypes = {
transactions: PropTypes.array.isRequired,
};
class Transfert extends Component {
componentDidMount() {
getTransactions();
}
render() {
return (
<div className="table">
</div>
);
}
}
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
export default connect(mapStateToProps, { getTransactions })(Transfert);
问题是我没有在 reduxdevtools 中从 Django 服务器获取数据。它什么都不显示,只说:type(pin):"@@INIT"。
而我应该从那里获取所有交易。
查看Django服务器,发现Django控制台显示:
code 400, message Bad request version
('\x9bú|$Lª\x01Þù\x83!ów·È\x803<Æ\x00"ZZ\x13\x01\x13\x02\x13\x03À+À/À,À0̨̩À\x13À\x14\x00\x9c\x00\x9d\x00/\x005\x00')
[27/Jan/2022 15:56:59] You're accessing the development server over
HTTPS, but it only supports HTTP.
我想在 Django 设置中将 SECURE_SSL_REDIRECT 设置为 false。所以,我这样设置它:
SECURE_SSL_REDIRECT=False SESSION_COOKIE_SECURE=False CSRF_COOKIE_SECURE=False
但是没有用,我还是没有找到正确的点。我所有的控制台日志记录都没有结果,我更加困惑,不知道问题是否出在 axios 调用中:axios.get('http://127.0.0.1:8000/api/transaction')
或者从 getTransaction() whitin React Transaction.js(矩形视图)。或者有什么关于
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
或者用 export default connect(mapStateToProps, { getTransactions })(Transfert);
注意:在我之前调用的 transaction.jsx 视图中:
componentDidMount() {
this.props.getTransactions();
}
使用 this.props 但错误提示:“必须使用解构道具分配”
这就是我将其更改为当前版本的原因:
componentDidMount() {
getTransactions();
}
非常感谢任何帮助。在这里我严重卡住了。
对我来说,这看起来像是您的 Django 服务器的问题。该错误表明您正在尝试使用 https 访问仅支持 http 的 api,但根据您的代码,您使用的是 http.
在浏览器中打开调试器,调用时网络流量是什么样的? return 有什么错误吗?预取 (OPTION) 请求是否发生并且 return 正常?
如果在调用实际请求之前被拒绝,则某处存在配置问题。可能是 CORS 或 https 而不是 http。
在这几周一直在努力解决这个问题之后,我找到了答案。首先,@Derek S 提到的“Cors header”是强制性的,我一开始忽略了它。但是在安装和配置之后,问题依然存在,因为我现在已经很好地掌握了一些其他的误解。
我以教程为例,其中为每个 redux 步骤创建了几个 redux 文件夹:Reducer 文件夹 – actions 文件夹 – 和一个 store.js 文件分开。因此,我的 React 组件中的主要 redux 操作是 getTransaction() 函数声明为:
import axios from 'axios';
import { GET_TRANSACTIONS } from './types';
export const getTransactions = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
}).catch((err) => console.log(err));
};
};
这里的疯狂是我在基于 class 的内部使用 redux
组件和 getTransactions() 函数没有被触发,因此
没有任何东西被发送到 redux 商店。
这是第一个问题。所以不是创造
getTransaction() 在一个单独的 redux actions 文件夹中,我把它扔了
直接在目标的 mapDispatchToProps 中的内容 class
像这样的组件:
const mapDispatchToProps = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
console.log(res.data);
}).catch((err) => console.log(err));
};
然后代替
export default connect(mapStateToProps, { getTransactions })(Transfer);
我宁愿这样做
export default connect(mapStateToProps, mapDispatchToProps)(Transfert);
redux devtools 漂亮地显示了从 API 抓取的交易:结果是
另一个误区是跟风
为 Django 配置 cors header 的建议,它们是
建议添加 const cors = require("cors"); 并具有:
export const getTransactions = () => (dispatch) => {
公理({
方法:'get',
url: ‘http://127.0.0.1:8000/api/transaction’
withCredentials:假,
content-type: text/plain
参数:{
access_token: SECRET_TOKEN,
},
});
};
但这只是屁股上的另一个巨大痛苦,因为 cors 头应该只在后端(服务器端)配置,在我的例子中是 django API,而不是在 axios 的调用中。因此,我摆脱了 React 前端应用程序的所有建议,并使组件尽可能简单:
import React, {Component,} from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import { GET_TRANSACTIONS } from '../../../../actions/types';
import PropTypes from 'prop-types';
import './transfert.css';
const initialState = {
transactions: [],
};
const propTypes = {
transactions: PropTypes.array.isRequired,
};
class Transfert extends Component {
render() {
return (
<div className="table">
</div>
);
}
}
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
const mapDispatchToProps = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
console.log(res.data);
}).catch((err) => console.log(err));
};
const connectToStore = connect(mapStateToProps, mapDispatchToProps);
const ConnectedComponent = connectToStore(Transfert);
export default connect(mapStateToProps, mapDispatchToProps)(Transfert);
现在它工作正常,因为 API 能够转发数据:
我正在构建一个 Django-React 应用程序(Django API 在其独立服务器上的端口 8000 和 React 前端在其独立服务器上的端口 3000 上)使用 axios 从 Django 服务器获取数据和 Redux 来发送数据。所以,我创建了这样的 redux 操作:
// 获取交易:/action/transactions.js
import axios from 'axios';
import { GET_TRANSACTIONS } from './types';
export const getTransactions = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
}).catch((err) => console.log(err));
};
在 React 视图中从 redux 存储获取数据我有这个:
// 反应视图:
import React, {Component,} from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getTransactions } from '../../../../actions/transactions';
import './transfert.css';
const initialState = {
transactions: [],
};
const propTypes = {
transactions: PropTypes.array.isRequired,
};
class Transfert extends Component {
componentDidMount() {
getTransactions();
}
render() {
return (
<div className="table">
</div>
);
}
}
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
export default connect(mapStateToProps, { getTransactions })(Transfert);
问题是我没有在 reduxdevtools 中从 Django 服务器获取数据。它什么都不显示,只说:type(pin):"@@INIT"。 而我应该从那里获取所有交易。
查看Django服务器,发现Django控制台显示:
code 400, message Bad request version ('\x9bú|$Lª\x01Þù\x83!ów·È\x803<Æ\x00"ZZ\x13\x01\x13\x02\x13\x03À+À/À,À0̨̩À\x13À\x14\x00\x9c\x00\x9d\x00/\x005\x00') [27/Jan/2022 15:56:59] You're accessing the development server over HTTPS, but it only supports HTTP.
我想在 Django 设置中将 SECURE_SSL_REDIRECT 设置为 false。所以,我这样设置它:
SECURE_SSL_REDIRECT=False SESSION_COOKIE_SECURE=False CSRF_COOKIE_SECURE=False
但是没有用,我还是没有找到正确的点。我所有的控制台日志记录都没有结果,我更加困惑,不知道问题是否出在 axios 调用中:axios.get('http://127.0.0.1:8000/api/transaction')
或者从 getTransaction() whitin React Transaction.js(矩形视图)。或者有什么关于
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
或者用 export default connect(mapStateToProps, { getTransactions })(Transfert);
注意:在我之前调用的 transaction.jsx 视图中:
componentDidMount() {
this.props.getTransactions();
}
使用 this.props 但错误提示:“必须使用解构道具分配” 这就是我将其更改为当前版本的原因:
componentDidMount() {
getTransactions();
}
非常感谢任何帮助。在这里我严重卡住了。
对我来说,这看起来像是您的 Django 服务器的问题。该错误表明您正在尝试使用 https 访问仅支持 http 的 api,但根据您的代码,您使用的是 http.
在浏览器中打开调试器,调用时网络流量是什么样的? return 有什么错误吗?预取 (OPTION) 请求是否发生并且 return 正常?
如果在调用实际请求之前被拒绝,则某处存在配置问题。可能是 CORS 或 https 而不是 http。
在这几周一直在努力解决这个问题之后,我找到了答案。首先,@Derek S 提到的“Cors header”是强制性的,我一开始忽略了它。但是在安装和配置之后,问题依然存在,因为我现在已经很好地掌握了一些其他的误解。
我以教程为例,其中为每个 redux 步骤创建了几个 redux 文件夹:Reducer 文件夹 – actions 文件夹 – 和一个 store.js 文件分开。因此,我的 React 组件中的主要 redux 操作是 getTransaction() 函数声明为:
import axios from 'axios'; import { GET_TRANSACTIONS } from './types'; export const getTransactions = () => (dispatch) => { axios.get('http://127.0.0.1:8000/api/transaction') .then((res) => { dispatch({ type: GET_TRANSACTIONS, payload: res.data, }); }).catch((err) => console.log(err)); }; };
这里的疯狂是我在基于 class 的内部使用 redux 组件和 getTransactions() 函数没有被触发,因此 没有任何东西被发送到 redux 商店。 这是第一个问题。所以不是创造 getTransaction() 在一个单独的 redux actions 文件夹中,我把它扔了 直接在目标的 mapDispatchToProps 中的内容 class 像这样的组件:
const mapDispatchToProps = () => (dispatch) => { axios.get('http://127.0.0.1:8000/api/transaction') .then((res) => { dispatch({ type: GET_TRANSACTIONS, payload: res.data, }); console.log(res.data); }).catch((err) => console.log(err)); };
然后代替
export default connect(mapStateToProps, { getTransactions })(Transfer); 我宁愿这样做
export default connect(mapStateToProps, mapDispatchToProps)(Transfert);
redux devtools 漂亮地显示了从 API 抓取的交易:结果是另一个误区是跟风 为 Django 配置 cors header 的建议,它们是 建议添加 const cors = require("cors"); 并具有: export const getTransactions = () => (dispatch) => {
公理({ 方法:'get', url: ‘http://127.0.0.1:8000/api/transaction’ withCredentials:假, content-type: text/plain 参数:{ access_token: SECRET_TOKEN, },
}); };
但这只是屁股上的另一个巨大痛苦,因为 cors 头应该只在后端(服务器端)配置,在我的例子中是 django API,而不是在 axios 的调用中。因此,我摆脱了 React 前端应用程序的所有建议,并使组件尽可能简单:
import React, {Component,} from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import { GET_TRANSACTIONS } from '../../../../actions/types';
import PropTypes from 'prop-types';
import './transfert.css';
const initialState = {
transactions: [],
};
const propTypes = {
transactions: PropTypes.array.isRequired,
};
class Transfert extends Component {
render() {
return (
<div className="table">
</div>
);
}
}
const mapStateToProps = (state) => ({
transactions: state.transactions.transactions,
});
const mapDispatchToProps = () => (dispatch) => {
axios.get('http://127.0.0.1:8000/api/transaction')
.then((res) => {
dispatch({
type: GET_TRANSACTIONS,
payload: res.data,
});
console.log(res.data);
}).catch((err) => console.log(err));
};
const connectToStore = connect(mapStateToProps, mapDispatchToProps);
const ConnectedComponent = connectToStore(Transfert);
export default connect(mapStateToProps, mapDispatchToProps)(Transfert);
现在它工作正常,因为 API 能够转发数据: