Django+Bing API数据无法在React获取，后端报AttributeError

错误原因分析 #

终端里的AttributeError: 'list' object has no attribute 'get'错误，核心原因是Django视图函数必须返回HttpResponse类的实例（比如JsonResponse），但你直接返回了results这个列表。Django的中间件（比如防点击劫持中间件）会尝试对响应对象调用get()方法读取响应头，而列表没有这个方法，因此触发500服务器错误。

修复步骤 #

1. 修改Django视图（views.py） #

把直接返回列表改成返回JsonResponse，同时处理跨域问题（React和Django端口不同，会存在跨域请求限制）：

from django.http import JsonResponse
import requests
from pprint import pprint

# 确保API_KEY已正确配置
API_KEY = "你的Bing API密钥"

def home(request):
    search_url = "https://api.bing.microsoft.com/v7.0/search"
    search_term = 'iphone 13'

    headers = {"Ocp-Apim-Subscription-Key": API_KEY}
    params = {"q": search_term, "textDecorations": True, "textFormat": "HTML"}
    response = requests.get(search_url, headers=headers, params=params)
    response.raise_for_status()
    search_results = response.json()
    pprint(search_results)

    pages = search_results['webPages']
    results = pages['value']
    
    # 返回JsonResponse，safe=False允许返回列表类型
    # 若想更规范，可包装成字典：return JsonResponse({'data': results})
    return JsonResponse(results, safe=False)

额外处理跨域（推荐）

前端跨域请求需Django配合，最简单的方式是安装django-cors-headers库：

• 安装：pip install django-cors-headers
• 在项目settings.py中配置：

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# 开发环境允许所有域名跨域，生产环境需指定具体域名
CORS_ALLOW_ALL_ORIGINS = True

2. 调整React组件（SearchResults.js） #

Bing返回的结果没有id字段，需替换key为唯一标识（比如item.url）；同时解析HTML格式的搜索摘要：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const SearchResults = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`http://localhost:8000/home/`);
                // 若Django返回的是字典包装的列表，改为setData(response.data.data)
                setData(response.data);
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>搜索结果</h1>
            {data ? (
                <ul>
                    {data.map((item) => (
                        <li key={item.url}>
                            <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>
                            <p dangerouslySetInnerHTML={{__html: item.snippet}}></p>
                        </li>
                    ))}
                </ul>
            ) : (
                <p>加载中...</p>
            )}
        </div>
    );
};

export default SearchResults;

验证修复 #

1. 重启Django服务器
2. 启动React应用，访问对应页面，即可正常加载Bing搜索结果，Django终端不再出现500错误。

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