Javascript 在ReactJS中获取onComponentDidMount期间出现CORS错误

在reactjs中获取api数据时，我获取空页面作为输出。

回购：

我可能是reactjs的新手，我得到的是一个空页面，即使数据提取得很完美。如果有人能在我做错的地方帮助我，那就太好了。事先非常感谢你

端点url:

api数据：

[
    {
        "id": 1,
        "url": "http://localhost:8000/api/blog_detail/brown",
        "title": "brown",
        "slug": "brown",
        "image": "http://localhost:8000/media/blog/image_2.jpg",
        "description": "",
        "created_on": "2020-05-08T15:20:53Z",
        "status": true,
        "category": [
            1
        ]
    },
    {
        "id": 2,
        "url": "http://localhost:8000/api/blog_detail/black",
        "title": "black",
        "slug": "black",
        "image": "http://localhost:8000/media/blog/loc.png",
        "description": "",
        "created_on": "2020-05-08T17:14:31Z",
        "status": true,
        "category": [
            2
        ]
    }
]

./src/Base.js

export default class App extends Component{

  state = {
    bloglist:[]
  };

  componentDidMount(){
    this.fetchData()
  }

  fetchData = async () => {
    try{
      const response = await fetch("http://localhost:8000/api/blog_list");
      const jsonResponse = await response.json()
      this.setState({bloglist:jsonResponse})
    }
    catch(error){
      console.log(error)
    }
  }

  render(){
    const {bloglist} = this.state
    if(!bloglist){
      return (
        <div>
          <h1>loading...</h1>
        </div>
      )
    }

    return (
      {
        bloglist.map(bloglist => (
          <h3 class="mb-2">
            <a href="single.html">{bloglist.title}</a>
          </h3>
          <p class="mb-4">{bloglist.description}</p>
          ))
      }
    )
  }
}

导出默认类应用程序扩展组件{
状态={
博客列表：[]
};
componentDidMount（）{
this.fetchData（）
}
fetchData=async（）=>{
试一试{
const response=等待获取（“http://localhost:8000/api/blog_list");
const jsonResponse=await response.json（）
this.setState（{bloglist:jsonResponse}）
}
捕获（错误）{
console.log（错误）
}
}
render（）{
const{bloglist}=this.state
如果（！bloglist）{
返回(
加载。。。
)
}
返回(
{
bloglist.map（bloglist=>(
{bloglist.description}
))
}
)
}
}

因为这是您的第一篇文章，所以在调试问题方面有一些事情进展不顺利

对于更大的问题，如您提出的问题，提供错误信息会有所帮助 来自开发人员控制台工具以及远程存储库源

e、 g

GEThttp://localhost:8000/api/blog_list net:：ERR_失败

'http://localhost:8000/api/blog_list“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源

从那里——通过包括——我可以通过

这导致了以下答案：

pip安装django cors头文件

添加已安装的应用程序

添加中间件

---

添加到您的存储库的链接“空白页”是什么意思？这是我的存储库-->@DenistSoi通常我在获取数据时会得到一个空白页。我没有得到预期的结果@Galabrate应用程序正在获得一个

GEThttp://localhost:8000/api/blog_list net:：ERR_失败

-从

访问获取http://localhost:8000/api/blog_list“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.common.CommonMiddleware',  
    ...
)

CORS_ORIGIN_ALLOW_ALL = True # If this is used then `CORS_ORIGIN_WHITELIST` will not have any effect
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
] # If this is used, then not need to use `CORS_ORIGIN_ALLOW_ALL = True`
CORS_ORIGIN_REGEX_WHITELIST = [
    'http://localhost:3000',
]