Django前端fetch调用API获取对象数组及CORS相关问题求助

你遇到的问题由两个错误导致：

• 拼写错误：buildProjects函数中循环判断条件里的lenght是拼写错误，正确写法为length，该错误会导致循环逻辑完全不触发，自然不会输出单条项目对象
• 接口返回结构取值错误：Django REST Framework默认开启分页时，接口返回的根对象并不是项目数组，数组内容存放在根对象的results字段中，直接把根对象传入循环逻辑无法遍历到项目内容

修改后的完整代码如下：

let projectsUrl = 'http://127.0.0.1:8000/api/projects/'

let getProjects = () => {
   
    fetch(projectsUrl)
        .then(response => response.json())
        .then(data => {
            console.log(data)
            // 传入分页结构中的项目数组
            buildProjects(data.results)
        })
   
}

let buildProjects = (projects) => {
    
    let projectsWrapper = document.getElementById('testz')
    // 修正length拼写错误
    for (let i = 0; projects.length > i; i++){
        let project = projects[i]
        console.log(project)
    }
}

getProjects()

如果你的Django后端没有开启分页，接口直接返回项目数组，那仅需要修改lenght的拼写错误即可，不需要调整传入buildProjects的参数。

内容的提问来源于stack exchange，提问作者Dorin