Django项目中Fetch请求NFC接口失败，寻求技术帮助

一、先定位核心错误类型 #

打开浏览器开发者工具（F12），切换到Console面板，查看Error al obtener el NFC:后的具体错误，分以下三类针对性排查：

• CORS policy相关提示：跨域配置未生效
• Network Error：后端服务不可达
• Unexpected token < in JSON at position 0：后端返回内容不是合法JSON

二、分场景排查步骤 #

1. CORS相关错误

• 直接在浏览器访问http://192.168.0.23:8081/read_nfc，打开开发者工具Network面板，检查响应头是否包含：
  • Access-Control-Allow-Origin：值必须包含你的Django项目域名/端口（比如http://localhost:8000或对应局域网IP）
  • Access-Control-Allow-Methods：需明确包含GET方法
• 检查后端CORS配置：
  • 若后端是Python服务，确认flask-cors/django-cors-headers的配置是否正确，是否允许了前端的源地址
  • 可临时测试Access-Control-Allow-Origin: *（注意：带Cookie的请求不适用该配置），验证是否是配置范围问题

2. Network Error

• 确认8081端口的服务是否正常运行：在服务所在机器执行curl http://127.0.0.1:8081/read_nfc，看是否能返回数据
• 测试Django所在机器能否访问该服务：在Django机器上ping 192.168.0.23，再执行curl http://192.168.0.23:8081/read_nfc
• 检查防火墙设置：确认8081端口未被防火墙拦截

3. JSON解析错误

• 访问http://192.168.0.23:8081/read_nfc，查看返回内容是否为合法JSON（比如有没有返回HTML错误页面、多余字符）
• 修改前端代码，先校验响应状态再解析JSON：

  .then(response => {
    if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
    return response.json();
  })
  

三、替代方案：Django反向代理 #

如果CORS配置始终无法生效，可通过Django中转请求，避免前端跨域：

1. 安装依赖：pip install requests
2. 在Django的views.py中添加中转视图：

   import requests
   from django.http import JsonResponse
   
   def proxy_read_nfc(request):
       try:
           res = requests.get("http://192.168.0.23:8081/read_nfc")
           res.raise_for_status()
           return JsonResponse(res.json())
       except Exception as e:
           return JsonResponse({"error": str(e)}, status=500)
   

3. 在urls.py配置路由：

   path('proxy_read_nfc/', views.proxy_read_nfc, name='proxy_read_nfc'),
   

4. 修改前端请求地址：

   fetch("/proxy_read_nfc/")
   

四、代码细节优化 #

给fetch添加主动超时控制，避免请求长时间pending：

const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error("请求超时")), tiempoLimite);
});

Promise.race([
    fetch("http://192.168.0.23:8081/read_nfc"),
    timeoutPromise
])
.then(response => response.json())
// 后续逻辑保持不变

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