如何将Bing Web Search API数据从Django传递到React展示？

一、改造Django端，提供可访问的API接口 #

1. 将api.py调整为Django视图函数 #

把原脚本改成支持HTTP请求的视图，返回JSON格式数据，同时增加错误处理：

from django.http import JsonResponse
import requests
from decouple import config
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt  # 开发阶段临时关闭CSRF校验，生产环境需配置CSRF白名单
def bing_search(request):
    if request.method != 'GET':
        return JsonResponse({'error': '仅支持GET请求'}, status=400)
    
    # 读取Bing API密钥
    subscription_key = config('subscription_key', default='')
    if not subscription_key:
        return JsonResponse({'error': '未配置Bing API密钥'}, status=500)
    
    # 从请求参数获取搜索词，默认值为iphone 13
    search_term = request.GET.get('q', 'iphone 13')
    search_url = "https://api.bing.microsoft.com/v7.0/search"
    
    headers = {"Ocp-Apim-Subscription-Key": subscription_key}
    params = {"q": search_term, "textDecorations": True, "textFormat": "HTML"}
    
    try:
        response = requests.get(search_url, headers=headers, params=params)
        response.raise_for_status()
        search_results = response.json()
        
        # 提取网页搜索结果，做容错处理
        pages = search_results.get('webPages', {})
        results = pages.get('value', [])
        return JsonResponse({'results': results}, status=200)
    except requests.exceptions.RequestException as e:
        return JsonResponse({'error': f'Bing API请求失败: {str(e)}'}, status=500)

2. 配置Django URL路由 #

在项目根目录的urls.py中添加路由，让视图能被外部访问：

from django.contrib import admin
from django.urls import path
from . import api  # 假设api.py与urls.py同级

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/bing-search/', api.bing_search, name='bing_search'),
]

3. 解决跨域访问问题 #

因为React和Django默认运行在不同端口，需要配置跨域允许：

1. 安装跨域处理包：

pip install django-cors-headers

2. 修改项目settings.py：

# 在INSTALLED_APPS中添加corsheaders
INSTALLED_APPS = [
    # ... 原有APP
    'corsheaders',
]

# 在MIDDLEWARE中添加跨域中间件（放在CommonMiddleware之前）
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... 其他中间件
]

# 允许React所在域名访问（示例为React默认端口3000）
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

# 开发阶段可临时允许所有域名（生产环境禁止）
# CORS_ALLOW_ALL_ORIGINS = True

二、React端实现数据请求与展示 #

1. 编写搜索结果展示组件 #

创建BingSearchResults.js组件，实现搜索请求和结果渲染：

import { useState, useEffect } from 'react';

function BingSearchResults() {
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [searchTerm, setSearchTerm] = useState('iphone 13');

    const fetchResults = async () => {
        setLoading(true);
        setError('');
        try {
            // 请求Django API接口，替换为你的Django服务地址
            const response = await fetch(`http://localhost:8000/api/bing-search/?q=${encodeURIComponent(searchTerm)}`);
            if (!response.ok) throw new Error('请求失败');
            const data = await response.json();
            setResults(data.results);
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    // 组件加载时默认请求一次
    useEffect(() => {
        fetchResults();
    }, []);

    const handleSearchSubmit = (e) => {
        e.preventDefault();
        fetchResults();
    };

    return (
        <div className="search-wrapper">
            <form onSubmit={handleSearchSubmit}>
                <input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="输入搜索词..."
                />
                <button type="submit">搜索</button>
            </form>

            {loading && <p>加载中...</p>}
            {error && <p style={{ color: 'red' }}>{error}</p>}
            
            <div className="results-list">
                {results.map((item, idx) => (
                    <div key={idx} className="result-item">
                        <h3><a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a></h3>
                        {/* 直接渲染带HTML格式的摘要 */}
                        <p dangerouslySetInnerHTML={{ __html: item.snippet }}></p>
                        <p className="result-url">{item.url}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default BingSearchResults;

2. 在App中引入组件 #

修改App.js，添加展示组件：

import BingSearchResults from './BingSearchResults';

function App() {
  return (
    <div className="App">
      <h1>Bing搜索结果展示</h1>
      <BingSearchResults />
    </div>
  );
}

export default App;

三、测试运行 #

1. 启动Django服务：

python manage.py runserver

2. 启动React服务：

npm start

3. 在React页面输入搜索词，即可看到Bing API返回的搜索结果。

生产环境注意事项 #

• 移除@csrf_exempt，配置CSRF令牌传递逻辑，或使用CORS的CSRF配置。
• 限制CORS_ALLOWED_ORIGINS为生产环境的React域名，禁止使用CORS_ALLOW_ALL_ORIGINS。
• 监控Bing API的调用额度，避免超出限制。
• 确保.env文件不被提交到版本控制系统。

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