axios 不会从 django 服务器检索数据

Posted 2023-03-03

【中文标题】axios 不会从 django 服务器检索数据

【英文标题】：axios wont retrieve data from django server

【发布时间】：2021-09-08 11:09:38

【问题描述】：

我尝试从我的 django 服务器检索数据以使用 react 渲染它，但我遇到了一个问题：数据未渲染。

我的 django 服务器在 localhost:8000 中运行，并且 react 应用程序在 localhost:3000 中运行

我的 App.js：

import React from 'react';
import axios from 'axios';

class App extends React.Component 

    state = 
        details : [],
    

    componentDidMount() 

        let data ;

        axios.get('http://localhost:8000/wel/')
        .then(res => 
            data = res.data;
            this.setState(
                details : data
            );
        )
        .catch(err => )
    

  render() 
    return(
      <div>
            this.state.details.map((detail, id) =>  (
            <div key=id>
            <div >
                  <div >
                        <h1>detail.detail </h1>
                        <footer >--- by
                        <cite title="Source Title">
                        detail.name</cite>
                        </footer>
                  </div>
            </div>
            </div>
            )
        )
      </div>
      );
  


export default App;

以及我尝试从中检索数据的服务器页面：

localhost:8000/wel

发生了什么事？

【问题讨论】：

从网络浏览器访问localhost:8000/wel时的输出是什么？

您能否打开浏览器的开发工具并查看网络选项卡中的请求或控制台中的任何错误？

【参考方案1】：

我认为您遇到了 No Access-Control-Allow-Origin Header 错误。

我建议你打开检查窗口并检查是否出现此错误。

如果是，那么我建议您访问这个。 django-cors-headers not work

如果你不使用 django rest-framework，我建议使用它。

【讨论】：

我完全按照链接的建议进行操作，但并没有解决问题。我仍然遇到同样的错误